Pseudo elements :: after and :: before work in which input types

Question

Pseudo elements :: after and :: before work in which input types

Navigation

#1 by (4 votes)

11

I would like to know if there is any documentation or article that says where exactly we can use ::after and ::before

I have already seen that in the <img> tag, for example, it does not work. I believe it does not work because <img> is an element of type Void Element (element that does not have a closing tag).

But the <input> tag is also a Void Element, however for certain types o :: after and :: before they work! I know that <label> works and that jQuery can do everything, but that's not the answer I want.

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
div {
   padding: 25px;
}
::after {
  color: #fff;
  background: blue;
  top: 20px;
  position: relative;
  width: 10px;
  height: 10px;
}
#teste-button::after{
  content: 'after button';
}
#teste-text::after{
  content: 'after text';
}
#teste-radio::after{
  content: 'after radio';
}
#teste-checkbox::after{
  content: 'after checkbox';
}
#teste-password::after{
  content: 'after password';
}
#teste-submit::after{
  content: 'after submit';
}
#teste-range::after{
  content: 'after range';
}
#teste-file::after{
  content: 'after file';
}
#teste-textarea::after{
  content: 'after textarea';
}
#teste-btn::after{
  content: 'after btn';
}
#teste-img::after{
  content: 'after img';
}
#teste-legend::after{
  content: 'after legend';
}
#teste-label::after{
  content: 'after label';
}
#teste-img2::after{
  content: 'after type img';
}

<div><input type="button" value="input button" id="teste-button" /></div>

<div><input type="text" value="type text" id="teste-text" /></div>

<div><input type="radio" value="teste" id="teste-radio" /></div>

<div><input type="checkbox" value="teste" id="teste-checkbox" /></div>

<div><input type="password" value="teste" id="teste-password" /></div>

<div><input type="submit" value="submit" id="teste-submit" /></div>

<div><input type="range" value="teste" id="teste-range" /></div>

<div><input type="file" name="file" placeholder="Arquivo" id="teste-file" /></div>

<div><textarea rows="2" cols="10" id="teste-range">textarea</textarea></div>

<div><button type="button" id="teste-btn">button</button></div>

<div><input type="image" alt="Login" id="teste-img2" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">inputtype="image" </div>

<div><img src='sem-img.jpg' id="teste-img" alt='img quebrada'/></div>

<div><img src='https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' id="teste-img" alt='img ok' style="width: 150px; height:auto"/>imagem ok</div>

<div><legend id="teste-legend">Legend</legend></div>

<div><label for="radio" id="teste-label">Label</label></div>

I made this code quickly enough just to show what I'm talking about. Notice that it does not seem to have an explanation where it works or not.

I tried to find a correct application list of these pseudo elements, but nothing very sure ... Anyone have any explanation?

html css3 pseudo-elementos

asked by anonymous 14.12.2017 / 18:53

1 answer

What is the use and how to use the "display: contents" of CSS? Does Google index images in SVG (inline) or Base64?

score 4 · Answer 1

Pseudo elements :: after and :: before do not work in replaced element (definition) . These elements are defined as those that are outside the scope of CSS, such as img, iframes, video, hr, br, embed and input.

The reason for this is that content entered as before or after is treated as a child, not as the sibling of the originating content. The replaced elements do not have any content in the DOM tree and therefore can not receive any type of child.

The issue of inputs is more difficult. Inputs with type image are replaced. The chrome accepts for some input types (checkbox, radio, color, file, date, datetime, local, month, range, time, week), but this behavior is not consistent among browsers, not working in Firefox for example. On a daily basis it is best, at least for now, to include inputs in the list of elements that do not get before or after.

The MDN documentation on the before explains that substitutes or " replaced elements "do not accept this tag and that the input tag is sometimes considered" replaced "(out of scope of CSS). There are those who argue that all inputs should be treated as replaced, only the type="image" or none of them ( this article discuss the theme ). Read Verou (dealing with another question) states that you should not rely on pseudo-elements in replaced elements, notably the input with type="checkbox" because although it works, it is not specified.