时间戳

首页 > 解决方案 > 如何使伪元素跨换行符跟随文本？

css - 如何使伪元素跨换行符跟随文本？

问题描述

我为转换 abackground-color和 a border-bottomusing的锚文本创建了 CSS opacity。（这样做是为了满足 Chrome Lighthouse 审核员关于避免过渡的规范，除了仅合成器的效果。）

CSS 将转换后的项目放在::before构建在锚点上的伪元素上。请注意，伪元素是绝对定位的，这是当前构造的技术的要求。除非锚文本跟随换行符，否则它可以工作。此 CodePen提供了一个可用的图解示例。

这里还提供了 CSS 和 HTML：

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 1em;
  font-size: 24px;
  line-height: 1.5;
}

header,
article {
  display: inline-block;
  margin: 1em;
  width: 100%;
}

p {
  padding-bottom: 1em;
}

ul {
  list-style: none;
}

li {
  float: left;
  margin-right: 1em;
}

a {
  background-color: transparent;
  border-bottom-color: transparent;
  border-bottom-style: solid;
  color: blue;
  text-decoration: none;
  position: relative;
}

a::before {
  background-color: lightgray;
  border-bottom-color: blue;
  border-bottom-style: solid;
  content: '';
  opacity: 0;
  transition: opacity 500ms ease;
  position: absolute;
  top: -5px;
  left: 0;
  bottom: -5px;
  right: 0;
  z-index: -1;
}

a:hover::before {
  opacity: 1;
}

a::after {
  --icon-width: 24px;
  color: blue;
  content: '';
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsdWUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWV4dGVybmFsLWxpbmsiPjxwYXRoIGQ9Ik0xOCAxM3Y2YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjhhMiAyIDAgMCAxIDItMmg2Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iMTUgMyAyMSAzIDIxIDkiPjwvcG9seWxpbmU+PGxpbmUgeDE9IjEwIiB5MT0iMTQiIHgyPSIyMSIgeTI9IjMiPjwvbGluZT48L3N2Zz4=);
  margin-left: 0.2em;
  padding-left: var(--icon-width);
  background-size: var(--icon-width) var(--icon-width);
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 999;
}
<body>
  <header>
    <ul>
      <li><a href=#>Anchor 1</a></li>
      <li><a href=#>Anchor 2</a></li>
      <li><a href=#>Anchor 3</a></li>
    </ul>
  </header>
  <article>
    <h1>Composited transitions on border-bottom and background-color</h1>
    <p>Avoid non-composited transitions! <code>opacity</code> and <code>transform</code> transitions are preferred by the Lighthouse auditor.</p>
    <p>See: <a href=https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count/ target=_blank rel="noreferrer noopener">Stick to Compositor-Only Properties and Manage Layer Count</a> by
      Paul Lewis of Google.</p>
    <p>Hover over the links to see the <code>border-bottom</code> and <code>background-color</code> fade in to cover the link text fully. This method works so long as the anchor text does not wrap across lines.</p>
    <p><strong><em>Resize the window until the long link text on the line above this one wraps to a second line. At that point, the technique fails.</em></strong></p>
    <p>Can you see a solution for the CSS?</p>
  </article>
</body>

我将如何编辑 CSS 以使::before元素跟随锚文本的换行符？

标签： cssopacityline-breakspseudo-element

解决方案

推荐阅读