Menu
Pretty sure this is a bug with Firefox, but perhaps someone can weigh in.
I am applying an outline around a 100x100 box. When you use a pseudo element that is positioned absolute it should remove it from document flow, but it appears it still is affecting the flow of the outline property. IE and Chrome appear to render this as I would expect, where the black outline stays positioned to the main element. Any ideas?
.content
{
width:100px;
height:100px;
outline:1px solid black;
border:1px solid yellow;
position:relative;
}
.content:after
{
position:absolute;
content:'pseudo';
background-color:salmon;
width:200px;
top:150px;
}<div class='content'></div>http://jsbin.com/gatupogiwi/1/edit?html,css,output
885
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters.
CSS - The ::before Pseudo-element The ::before pseudo-element can be used to insert some content before the content of an element.
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
You can change the outline style to box-shadow:
outline:1px solid black;
to:
box-shadow: 0px 0px 0px 1px black;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
