是否有办法使css每一行下划线？

Question

我正在制作hexo博客主题。我试着把线条记得像风格一样。我想使css的每一行都有下划线(不像U标签)

想要

​

​

但是如果我使用border-bottom: 1px solid grey

真品

​

​

Answer 1

您还可以使用渐变绘制在文本下面的网格。它必须与线高相匹配。

这里是一个使用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>

​

在示例中添加一个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。

Answer 2

您可以使用text-underline-offset文本装饰:下划线来达到这种效果(尽管IE中根本不支持样式规则(用于将线条与您的正常位置相距的)，而且其他浏览器也不支持它)。唯一的其他方法是将内容拆分为跨范围，并将边框底部或:后伪元素应用于每个跨度。

​

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>

​

Answer 3

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>

​