有沒有辦法讓每一行的css下劃線？[復制]

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

真實的

uj5u.com熱心網友回復：

您也可以使用漸變在文本下方繪制網格。它必須匹配行高

這是一個使用 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

uj5u.com熱心網友回復：

您可以使用text-decoration: underline來獲得該效果（盡管IE 根本不支持用于將行與正常位置隔開的text-underline-offset樣式規則，并且其他一些瀏覽器有點參差不齊）。唯一的另一種方法是將內容拆分為跨度并將邊框底部或 ::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>

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

試試這個 ：

  text-decoration: underline;
  text-underline-offset:6px;

uj5u.com熱心網友回復：

您是否嘗試過使用 text-decoration-line 屬性。文字裝飾線：下劃線；

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-line

標籤：css

上一篇：CSS影片恢復默認

下一篇：jQuery：如何清空具有相同屬性值但保留第一個添加的td的內容的知名表tds內容