logo标签列表

有没有一种方法可以使每一行都有 CSS 下划线？

css
3

我正在制作hexo博客主题。我尝试制作类似于行注释的样式。我想让每一行的CSS都有下划线（不像U标签）。

期望效果

期望效果

但是，如果我使用border-bottom: 1px solid grey样式：

实际效果

实际效果

1
请分享你的代码。 - Evren
你可以将它混合得非常好。我也更新了我的答案。https://dev59.com/N8Tra4cB1Zd3GeqP2krt#72067345 - Maik Lowrey
5个回答
3
你还可以使用渐变来绘制文本下方的网格。它必须匹配行高。
以下是使用CSS var()进行调整的示例。 

p, textarea {
  --lineH: 1.6em;
  line-height: var(--lineH);
  padding:var(--lineH);
  padding-block:0;/*reset to set first line right at top */
  background:repeating-linear-gradient(to bottom, transparent 0 1.4em, gray 1.4em calc(1.4em + 2px), transparent calc(1.4em + 2px) 1.6em)  50% 0 / calc(100% - var(--lineH) * 2  ) 100% no-repeat ;

}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<textarea placeholder="Type your texts here"></textarea>

在示例中添加了一个文本区域，以展示另一种可能的用法。

如果需要，可以使用以下资源：

https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/var

https://developer.mozilla.org/en-US/docs/Web/CSS/background

https://css-tricks.com/a-complete-guide-to-calc-in-css/

您可以使用更多的渐变效果来模拟整张乐谱 https://codepen.io/gc-nomade/pen/bGLGNWB

这个答案很棒的原因在于点击这里查看。 - Neptotech -vishnu
你可以将渐变简化为 repeating-linear-gradient(transparent 0 calc(1.6em - 2px), gray 0 1.6em)。 - Temani Afif
1
你可以使用 text-decoration: underline 来实现这种效果（尽管用于设置行与正常位置之间距离的 text-underline-offset 样式规则在 IE 中完全不受支持，而其他一些浏览器也有点问题）。唯一的其他方法是将内容拆分为多个 span，并对每个 span 应用 border-bottom 或 ::after 伪元素。 

p { 
   font-size: 14px;
   font-weight: 400;
   line-height: 32px;
   text-decoration: underline;
   text-underline-offset: 4px;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>

1

p标签是块级元素。这意味着如果你为其指定边框，边框将被分配给该块。如果你将p标签更改为内联元素，则边框将按照你想要的方式显示。

更新

带有下划线的内部单词

p {
  display: inline;
  border-bottom: 1px solid grey;
}

p span {
  text-decoration: underline;
  color: red;
}
<h2>Hello world<h2>
  <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing</span> elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>

p {
  display: inline;
  border-bottom: 1px solid grey;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>

1
这就是我想要的。 - ywbird
@YellowBird 感谢您的反馈，不客气！如果您发现我的答案解决了您的问题，那么将此答案标记为已接受会很好。谢谢！ - Maik Lowrey
0

试试这个：

  text-decoration: underline;
  text-underline-offset:6px;
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接