如何使文本下划线的CSS

我有两个<a>标签和我需要他们来强调这样的：（请注意，我不能使用border-bottom: dashed 10px，因为线是瘦，但它们之间的空间是相当大的如何使文本下划线的CSS

my text

HTML：

<a href="" class="t1">text1</a> 
<a href="" class="t2">text2</a>

CSS：

.t1 { 
    color: #8bb09e; 
} 

.t2 { 
    color: #ffee90; 
}

来源

2014-04-25 user2950593

有2点的方法，但是如果你想使用时不会发生一些其他风格的这种做法是的border-bottom: value;

.t1 { 
    border-bottom: 1px dashed #333; 
}

使用。就像你谈论的空间一样。那么你更可能使用底部边界的图像并创建边界效果。

来源

2014-04-25 16:44:14

这是你所需要的:)

.t1 { 
    display:inline-block; /* make width equal to link content */ 
    padding-bottom:5px; /* margin between underline and text*/ 
    border-bottom:1px dashed red; /* height type and color of underline */ 
}

编辑

你需要的是增加了一个另外min-width财产您<a> styles.check演示

Demo

来源

2014-04-25 16:44:24 NoobEditor

我再次需要增加边界底线之间的空间。 – user2950593

已添加和编辑。，请检查它是否有帮助！ :) – NoobEditor

如果你可以给主播一个position:relative属性，我会使用绝对定位的伪元素。您可以使用一个背景图像或线性渐变就像我在我的演示做

演示：http://jsfiddle.net/6Jzu6/1

a { 
    position: relative; 
    ... 
    display: block; 
    ... 
} 

a:after { 
    content: ''; 
    position:absolute; 
    height: 1px; 
    width: 100%; 
    top: 100%; 
    left: 0; 
    background-image: -webkit-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image: -moz-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image:  -ms-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image:  -o-linear-gradient(left, transparent 50%, #8b0 50%); 
    background-image:   linear-gradient(left, transparent 50%, #8b0 50%); 
    background-size: 20px 20px; 
}

编辑：哎呀！信贷到期的信贷。我从this source得到线性梯度概念

来源

2014-04-25 16:53:29

以下是我过去使用过的方法。它使用一个充当边界的伪元素。

http://jsfiddle.net/h7Z9K/

p { 
    display: inline-block; 
    position: relative; 
} 
p::after { 
    content: ""; 
    display: block; 
    width: 100%; 
    border-bottom: 1px dashed #000; 
    position: absolute; 
    left: 0; 
    bottom: -0.5em; 
}

通过调整其底部位置，调整伪元件边界相对于所述元件的位置。

来源

2014-04-25 16:58:34

.t1 { 
 
    color: #8bb09e; 
 
    border-bottom-style: dashed !important; 
 
    width:30%; 
 
    text-align:center; 
 
    display:inline-block; 
 
} 
 

 
.t2 { 
 
    color: #ffee90; 
 
    text-align:center; 
 
    border-bottom-style: dashed !important; 
 
    float:right; 
 
    width:30%; 
 
}

<a href="" class="t1">text1</a> 
 
<a href="" class="t2">text2</a>

来源

2016-12-01 14:58:19

如何使文本下划线的CSS

回答

相关问题