如何使文字下划线css

Question

我有两个<a>标签，我需要它们加下划线： （请注意，我不能使用border-bottom: dashed 10px因为线很细但它们之间的空间非常大。

HTML：

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

CSS：

.t1 {
    color: #8bb09e;
}

.t2 {
    color: #ffee90;
}

Answer 1

有两种方法，但这种方法是使用border-bottom: value;

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

如果你想使用一些不会发生的其他风格。就像你在谈论的空间一样。然后你更有可能将图像用于底部边框并创建类似边框的效果。

Answer 2

如果您可以为锚点赋予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

得到了线性渐变概念

Answer 3

这就是你所需要的：）

.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>样式中。检查演示

Demo

Answer 4

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

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;
}

通过调整底部位置来调整伪元素边框相对于元素的位置。

Answer 5

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;