如何在偏離中心的文本下劃線？-有解無憂

我希望文本下劃線偏離中心和重疊文本。我不知道如何做到這一點。復制以下效果的最佳方法是什么？

如何在偏離中心的文本下劃線？

當前代碼：

.title {
  font-style: italic;
}

.titleWrapper {
  border-bottom: 20px solid var(--main-accent-color);
}

<div className="titleWrapper">
  <h2 className="title">About Me</h2>
</div>

uj5u.com熱心網友回復：

text-indent負值可以在這里為您提供幫助：

.title {
  --i: 20px;

  width: fit-content;
  box-shadow: 0 -10px red inset;
  text-indent: calc(-1*var(--i));
  padding-right: var(--i);
  margin-left: var(--i);
}

<h2 class="title">About Me</h2>

uj5u.com熱心網友回復：

有很多方法可以做到這一點，但也許更簡單的是創建一個重音元素并從容器中定位它。在容器的現代 CSSdisplay:grid;中，可能會是一個不那么“嘈雜”的 CSS，但會留給另一個問題。

網格：重疊網格列（一些額外的邊框來顯示東西在哪里）內容“樣式”與網格分離；

Show code snippet

:root {
  --main-accent-color: #ffdddd;
}

.grid-container {
  display: grid;
  grid-template-columns: 2rem 10rem 1fr;
  grid-template-rows: repeat(2, 1fr);
  border: 1px dotted orange;
}

.grid-container>* {
  border: solid 1px red;
}

.title {
  font-style: italic;
  font-size: 1.5rem;
}

.title-accent {
  background-color: var(--main-accent-color);
  font-size: 0.75rem;
  height: 1rem;
}

.one {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 2;
  grid-row: 2 / 3;
  z-index: -1;
}

<div class="titleWrapper grid-container">
  <h2 class="title one">About Me</h2>
  <div class="title-accent two">&nbsp;</div>
</div>

定位：

Show code snippet

:root {
  --main-accent-color: #ffdddd;
}

.title {
  font-style: italic;
  border: solid 1px blue;
  margin-bottom: 0;
}

.titleWrapper .title-accent {
  display: absolute;
  margin-top: -0.25rem;
  margin-left: 2rem;
  border-top: 20px solid;
  border-top-color: var(--main-accent-color);
  width: 10rem;
}

<div class="titleWrapper">
  <h2 class="title">About Me</h2>
  <div class="title-accent"></div>
</div>

uj5u.com熱心網友回復：

這不是最佳實踐，但有效：

.title .a {
  text-decoration: none;
}

.title .rest {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 3px;
}

<h2 className='title'>
<span className='a'>A</span><span className="rest">bout Me</span>
</h2>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/512269.html

標籤：htmlcss用户界面

上一篇：win7升級到win10系統后，node13升級為node16，node版本node-sass版本與不匹配，導致出現npm ERR! ERESOLVE could not resolve

下一篇：如何在Tailwind中使用props變數？