CSS content generation before or after ‘input’ elements [duplicate]

by

With :before and :after you specify which content should be inserted before (or after) the content inside of that element. input elements have no content.

E.g. if you write <input type="text">Test</input> (which is wrong) the browser will correct this and put the text after the input element.

The only thing you could do is to wrap every input element in a span or div and apply the CSS on these.

See the examples in the specification:

For example, the following document fragment and style sheet:

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

…would render in exactly the same way as the following document fragment and style sheet:

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

This is the same reason why it does not work for <br>, <img>, etc. (<textarea> seems to be special).

More Related Contents:

  1. Grid or Table? for Text and an Image on the bottom right (4/4) [duplicate]
  2. Make headings (h1, h2, …) inherit style from body
  3. How can I vertically align elements in a div?
  4. Image inside div has extra space below the image
  5. Center image using text-align center?
  6. Does UL have default margin or padding [duplicate]
  7. Why doesn’t the height of a container element increase if it contains floated elements?
  8. Text in Border CSS HTML
  9. Why position:sticky is not working when the element is wrapped inside another one?
  10. What’s the difference if I put css file inside or ?
  11. Change bullets color of an HTML list without using span
  12. Change color of sibling elements on hover using CSS
  13. Word wrap options in a select list
  14. ie9 border radius
  15. Setting transform-origin on SVG group not working in Firefox
  16. Color of stacked semi-transparent boxes depends on order?
  17. text-overflow: ellipsis not working
  18. Scale image to fit a bounding box
  19. Pure css Chessboard with div & no classes or ids, is it possible?
  20. How to change the size of the radio button using CSS?
  21. 100% width minus margin and padding [duplicate]
  22. How to include all css kept in a directory?
  23. Making an svg image object clickable with onclick, avoiding absolute positioning
  24. Insert HTML from CSS
  25. How to show an animation that is hidden behind a colored div using a “reveal” div on the surface
  26. Which elements support the ::before and ::after pseudo-elements?
  27. How to align footer (div) to the bottom of the page? [duplicate]
  28. CSS: display:block; vs display:table;
  29. How to center and crop an image to always appear in square shape with CSS?
  30. inline-block element with no text renders differently

Leave a Comment