CODEWITHSUNDEEP
css
user1049961
user1049961

Reputation: 2736

CSS3 - style part of div after <br /> tag

I have following div:

<div class="mydiv">
     This is some introduction text
     <br />
     click me
</div>

Is it possible to style the click me differently than the rest of the div using CSS only?

Upvotes: 5

Views: 5249

Answers (2)

FelipeAls
FelipeAls

Reputation: 22171

You can style the :first-line differently. If there's only 2 lines, it's kind of feasible to style the 2nd and last line than the first one in pure CSS.

Codepen

BUT

  • you can't style every property (MDN)
  • being certain that a text will occupy exactly 2 lines would be ignoring narrow devices like smartphones (hello RWD) or zooming at the will of each user (graphical or text zooming). The web is not a PDF :)

+1 to Pevara suggestion: it should be a link or a button and then it can easily be styled

div {
  text-transform: uppercase;
  font-size: 2rem;
  color: red;
}
div::first-line {
  text-transform: initial;
  font-size: 1rem;
  color: initial;
}
<p>OK</p>
<div class="mydiv">
     This is some introduction text
     <br />
     click me
</div>
<hr>
<p>#fail</p>
<div class="mydiv" style="width: 100px; border: 1px dotted blue">
     This is some introduction text
     <br />
     click me
</div>

Upvotes: 13

j08691
j08691

Reputation: 207900

No, without modifying the HTML or using JavaScript there is no pure CSS way to select the text click me.

Upvotes: 1

Related Questions