css Question posted in
Some basic documentation can be found here.

Css – How do I apply styles when hovering only the ::first-line of an element?

I want to make the first line of a paragraph bold only when the user hovers over the first line of the paragraph. I tried something like:

p::first-line:hover {
    font-weight: bold;
}

Please note that this question is different from another Stack Overflow question. The referenced question is about how to make the first-line of the paragraph bold when the user hovers over any part of the tag. My question is how to make the first-line bold when user hovers only over the first line.

Tags:

2

Answers


  1. 0

    How you have tried it is correct per the relevant CSS specification:

    For example, since the :hover pseudo-class specifies that it can apply to any pseudo-element, ::first-line:hover will match when the first line is hovered.

    However, this specific feature combination is not yet implemented in any browsers (e.g. Firefox v123 and Chromium v123). In the future, browsers may support this, and this answer can be updated at that time. In the meantime, you’ll need to use JavaScript to achieve that functionality.

    Login or Signup to reply.
  2. 0

    The only way I can think off as things stand with CSS at the moment is slightly hacky as it introducwa an otherwise spurious element into the DOM.

    This snippet puts a span over the first line and it is hovering that that triggers style changes in the neighboring p element.

    span:has(+p) {
  position: absolute;
  width: 100%;
  height: 1lh;
  background-color: transparent;
  z-index: 1;
}

span:hover+p::first-line {
  font-weight: bold;
  position: relative;
  padding: 0;
}
    <span></span>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search