将另一个元素样式化为第一行的伪元素

问题描述

我正在使用伪元素来设置文档中段落的第一行 (class="first-para") 的样式:

.first-para::first-line {
  font-weight: bold;
  font-size: calc(var(--fontSize) * 1.25);
}

除了链接样式之外,是否可以在第一行中包含一个链接元素来使用伪样式,即粗体和更大的字体大小?我无法直接为链接指定相同的样式,因为在较小宽度的屏幕上,链接不会位于第一行。这是当前的尝试:article

解决方法

您的 CSS 中有此规则,它也会影响您第一行中的 a 链接元素:

p,li,b,i,a,mark {
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    letter-spacing: var(--letterSpacing);
    font-feature-settings: normal;
}

因此,为了避免影响 a 段落中的 .first-para 元素,请为 .first-para a 创建/添加规则,该规则通过对所有值使用 inherit 来重置这些设置:

.first-para a {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-feature-settings: inherit;
}