Styling an element within another styled as a pseudo element first-line

Question

I am using a pseudo-element to style the first line of a paragraph (class="first-para") in my document:

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

Is it possible to have a link element within that first line to use the pseudo style also, i.e. bold and larger font-size, in addition to its link styling? I can't assign the same styling directly to the link because on smaller width screens the link would not be in the first line. Here's the current attempt: article

Answer 1

There is this rule in your CSS, which also affects the a link element in your first line:

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

So to avoid that affecting the a element in your .first-para paragraph, create/add a rule for .first-para a which resets those settings by using inherit for all values:

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