How to apply a specific style only to the last line of a paragraph in CSS

Applying a specific style to only the last line of a paragraph in CSS can be a bit tricky because CSS does not have a selector specifically for the last line. However, you can achieve a similar effect using some creative approaches.

One common method is to use the :after pseudo-element along with the content property to add a visually hidden character at the end of the paragraph. Then, you can style that character to create the appearance of styling the last line.

Here's an example:

cssCopy code
p {
  position: relative;
}

p:after {
  content: "\00a0"; /* Add a non-breaking space character */
  display: block;
  height: 1.2em; /* Adjust the height to match the line height of your text */
  background-color: #ff0000; /* Your desired style for the last line */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

This example adds a non-breaking space character after each paragraph and styles it to give the appearance of styling the last line. You can adjust the background-color and other styles to match your specific design.

Keep in mind that this method might not work perfectly in all situations, especially if your text spans multiple lines dynamically. It's a workaround, and you may need to adjust the styles based on your specific use case.