【问题标题】:How to make text underline css如何使文本下划线css
【发布时间】:2014-06-11 11:54:41
【问题描述】:

我有两个<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;
}

【问题讨论】:

    标签: html css underline


    【解决方案1】:

    有两种方法,但这种方法是border-bottom: value;的用法

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

    如果您想使用其他一些不会发生的样式。就像你说的空间。那么您更有可能使用图像作为底部边框并创建类似边框的效果。

    【讨论】:

      【解决方案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得到了线性渐变的概念

      【讨论】:

        【解决方案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 属性添加到您的&lt;a&gt; 样式中。查看演示

        Demo

        【讨论】:

        • 再一次我需要增加边框底线之间的空间。
        【解决方案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;
        }
        

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

        【讨论】:

          【解决方案5】:

          .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>

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2014-05-01
            • 2018-01-17
            • 2019-10-16
            • 2015-12-12
            • 1970-01-01
            相关资源
            最近更新 更多