Can You Target ≪Br /≫ With Css

Change br height using CSS

You can't change the height of the br tag itself, as it's not an element that takes up space in the page. It's just an instruction to create a new line.

You can change the line height using the line-height style. That will change the distance between the text blocks that you have separated by empty lines, but natually also the distance between lines in a text block.

For completeness: Text blocks in HTML is usually done using the p tag around text blocks. That way you can control the line height inside the p tag, and also the spacing between the p tags.

Ignore br with CSS?

With css, you can "hide" the br tags and they won't have an effect:

br {
    display: none;
}

If you only want to hide some within a specific heading type, just make your css more specific.

h3 br {
    display: none;
}

CSS3 - style part of div after br / tag

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>

Apply a class to a br tag?

One application I can think off is adding using it with pseudo-elements, such as :before or :after, for instance adding some text beneath a horizotal line:

hr.something:after  { content: "Some text"  }

Using br/ versus p/p versus CSS for form fields, what is the current accepted best practice for desktop, mobile, and accessibility?

In HTML5, the br element must only be used if the line break is "actually part of the content". Typical examples where br is appropriate: in postal addresses and in poems.

As the line break in your example is not meaningful (it seems to be needed only for layout reasons; see also the example below), you must not use br. You should use CSS instead (display:block).

The div element typically comes with this CSS declaration by default, and using it (or more specific elements, like p, if appropriate) allows user-agents without CSS support (e.g., text browsers) to display the content in a more comprehensible manner (they’d typically also display line breaks if a so-called "block-level" element is used).

The spec explicitly mentions a similar case in an example:

The following examples are non-conforming, as they abuse the br element:

[…]
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

How to change the height of a br?

Css:

br {
   display: block;
   margin: 10px 0;
}

The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:

line-height:22px;

For Google Chrome, consider setting content:

content: " ";

Other than that, I think you're stuck with a JavaScript solution.