【问题标题】:How to increase width of underline for the multiline text when on hover悬停时如何增加多行文本的下划线宽度
【发布时间】:2017-08-08 19:17:11
【问题描述】:

代码中的兄弟们,

我正在尝试为<p> 标签之间的多行文本实现自定义text-decoration: underline; 效果。类似一个,如下图所示。

您愿意就这个问题分享一些想法或解决方案吗?您认为使用:before :after 仅使用 CSS 就可以实现结果,还是 JS 可以派上用场?

非常感谢所有可能的帮助。 会很期待的。

【问题讨论】:

  • 我很确定它可以用:afterborder 完成
  • 我正在考虑悬停时的背景图像。
  • 可以加一个span吗?

标签: javascript jquery html css


【解决方案1】:

在做了一些research 之后,似乎可以在<p> 中添加<span> 并在其中添加box-shadow。这比border 效果更好,因为border 必须仅显示在文本下方。这允许下划线与文本相交。这是一个添加的元素,但它不需要您将所有内容分解到它自己的 <p> 元素中。

.underline{
  max-width: 240px;
  font-family: sans-serif;
  font-size: 20px;
}

.underline:hover span{
  box-shadow: inset 0 -10px lightblue;
}
  <p class="underline">
    <span>Pick some apples.<br>
    Make some juice. with more text so long that it wraps.<br>
    ????<br>
    Profit!
    </span>
  </p>

【讨论】:

  • 文本应在一个

    悬停在文本上时所有行都应加下划线。

  • 是的,但是您仍然对每一行使用

    。当 html 为:&lt;p&gt;Let the paint work&lt;br&gt;Share it with a friend&lt;br&gt;Just float around and be there&lt;/p&gt; ?

  • 经过一番研究看起来你可以。但这并没有与文本相交,仍在研究它。
  • border-bottom 将让您设置下划线的宽度。您认为可以设置边框底部的位置并使其与文本重叠吗?
  • 不错!就是这样,非常感谢@Don
【解决方案2】:

您可以使用repeating linear gradient,并在段落上设置display: inline,仅在文本下方绘制线条:

p {
  display: inline;
  font-size: 20px;
  line-height: 28px;
  background: repeating-linear-gradient(to bottom, transparent, transparent 14px, rgba(128, 0, 128, 0.5) 14px, rgba(128, 0, 128, 0.5) 22px);
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet elementum purus sed fermentum. Aliquam vehicula vel leo ut ullamcorper. <br /> Aenean condimentum justo massa, et eleifend quam elementum at. Mauris vulputate quam ut velit mattis, at pretium
  ex faucibus. Nulla facilisi. <br /> Quisque condimentum sapien ut diam lacinia, non commodo turpis faucibus. Ut in nisl nec magna lobortis tristique ac vitae ante. Cras egestas felis nec tortor varius rhoncus. Phasellus sagittis eget dolor ut condimentum.</p>

【讨论】:

    【解决方案3】:

    不确定是否可以在段落中注入跨度。如果可以的话,通过设置底部边框就足够简单了。

    p:hover > span {
      border-bottom: 5px solid black
    }
    &lt;p&gt;&lt;span&gt;Bacon ipsum dolor amet sausage ribeye pastrami, chuck sirloin filet mignon pancetta tail boudin ground round flank pork t-bone turducken. Venison boudin cupim bresaola corned beef meatball pork loin pancetta doner drumstick. Bresaola pork loin fatback pig turkey. Biltong bresaola shoulder cow shankle pork belly brisket ham hock chuck. Meatball drumstick salami pork loin.&lt;/span&gt;&lt;/p&gt;

    【讨论】:

    • 你认为可以让边框与文字交叉吗?
    • 看问题中的图片。您将看到下划线与文本重叠。
    • 他希望边框出现在文本中。几乎就像文本的背景。这只会在文本下方显示颜色,而不是在其后面。
    • 我明白,直到 OP 提到它才清楚......看起来像一个糟糕的 MS Paint 工作。 :)
    • 要获得这种效果,我认为唯一可能的就是背景图片。
    【解决方案4】:

    您可以将box-shadow 用于您的情况,如下所示:

    .custom-underline {
        font-size:200%;
        font-weight:bold;
        margin: 0;
        display: inline-block;
    }
    .custom-underline:hover {
        box-shadow: inset 0 -15px 0 violet, inset 0 -3px 0 black
    }
    <p class='custom-underline'>Let the paint work</p>
    <br>
    <p class='custom-underline'>Share it with a friend</p>
    <br>
    <p class='custom-underline'>Just float around and be there</p>

    【讨论】:

    • @epascarello,你能解释一下有什么区别吗?
    • 解决方案将为容器提供下划线效果,而不是为其自身的文本。尝试刹车

      你会看到它只会在最后一行下划线。

    • 为什么是 :hover?
    • 不,你的答案不会换成多行......添加一大块文本......
    • 你看到下划线比文字长。想象一下,你有一个帖子标题,你只能使用一个

    【解决方案5】:

    将每个短语包装在 p 中,如下所示:

    <p>
    let the paint work21321321213123321321321  213 
    </p>
    <p>
    let the paint work   
    </p>
    <p>
    let the paint work   
    </p>
    

    css

    p {
        height: auto;
        position: relative;
        width: 200px;
        }
    
     p::before {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            width: 130%;
            left: 0%;
            border-bottom: 1px solid red;
        }
    

    【讨论】:

      【解决方案6】:

      这就是你要找的吗?

      我使用了:after pseudo-element 并给了它absolute position

      渲染效果我在pseudo-element 中添加了一个底部边框,并使用-.35em top 将其提升一点,这导致它始终调整为主要元素的font-size

      工作示例:

      p span {
        display:inline;
        position: relative;
        font-size: 30px;
        font-weight: 500;
        color: #27196e;
      }
      
      p:hover span:after {
        content: "";
        position: absolute;
        height:100%;
        width:100%;
        top: -.35em;
        left: 0;
        border-bottom: 8px solid rgba(111, 111, 255, .4)
      }
      <p>
      <span>Let the paint work</span>
      <br/>
      <span>Share it with a friend</span>
      <br/>
      <span>Just float around and be there</span>
      </p>

      【讨论】:

      • 多行文字&lt;p&gt;Let the paint work&lt;br&gt;Share it with a friend&lt;br&gt;Just float around and be there&lt;/p&gt;
      • 如何让它悬停? :D
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-30
      • 2013-03-25
      • 2015-02-07
      • 2022-01-21
      • 2014-02-11
      • 1970-01-01
      相关资源
      最近更新 更多