Width and Height Doesn't Seem to Work on :Before Pseudo-Element

width and height doesn't seem to work on :before pseudo-element

Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.

Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.

a.infolink::before {
    content: '?';
    display: inline-block;
    background: blue;
    color: white;
    width: 20px;
    height: 20px;
}

http://jsfiddle.net/C7rSa/3/

Why before pseudo element doesn't get 100% container height?

Seems to be working, it might be something else in your code:

.view-details:before {    content: "";    width: 1px;    margin: 0 20px;    border-left: solid 1px #cbcbcb;}
.view-details {    display: inline-block;        font-size:40pt;}

<div class="view-details"><a href="/retro-beauty-bar">VIEW DETAILS</a></div>

The CSS ::before pseudo element doesn't seem to be working. I can't seem to find out as to why nor get a solution online

I would just write the forward slash as a '/'.

Set the width of the box to be the size of the space, center aligning the text.

{
    content: '/';
    width: 20px;
    text-align: center;
}

EDIT: how I would have written it...

 .breadcrumbs  {  object-fit: contain;  padding: 10px; }
 .breadcrumbs li {  display: block;  padding: 0;  float: left;    /* if you remove the line breaks in the html between your li's you can use display: inline-block; and remove the float left */ }
 .breadcrumbs li+li:before {  content: '/';  width: 20px;  text-align: center;  display: inline-block; }
 .breadcrumbs li a {  text-decoration: none; }
 .breadcrumbs li a:active {  text-decoration: underline;  color: powderblue; }

<ul class="breadcrumbs"> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\home_landing.html">Home</a></li> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\products.html">Products</a></li> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\contact_us.html">Contact Us</a></li> <li><a href="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML_CSS_JS_practice\Chairmaster\Codes\reviews.html">Reviews</a></li></ul>

Pseudo element not full container width when border used

From the specification

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

....

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

Otherwise, the containing block is formed by the padding edge of the ancestor

Then

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

This explain why your element doesn't use the border-box as reference but the padding-box when positionned. It's also the same for percentage width¹. using width:100% means the padding and the content of the containing block. Border aren't counted.

Concerning box-sizing

... , any padding or border specified on the element is laid out and drawn inside this specified width and height.

So the border need to belong to the element not a parent element in order to consider box-sizing which is not your case since the border isn't applied to the pseudo element:

¹ For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.^ref

.box {  border:5px solid;  padding:10px;  background:red;  min-height:100px;  position:relative;}span:first-child {  display:inline-block;  width:100%;  background:blue;}span:last-child {  position:absolute;  bottom:0;  left:0;  width:100%;  background:green;}

<div class="box">  <span>I am a static element</span>  <span>I am a absolute element</span></div>

Can you apply a width to a :before/:after pseudo-element (content:url(image))?

You're not crazy: it is indeed not possible to change the dimensions of an image that is inserted using content, whether it's inserted with url(), image(), image-set(), element(), or a CSS gradient. The image is always rendered as is. This is known as replaced content, or a replaced element (except we're not talking about elements here).

However, since replaced elements can be resized using width and height as described in section 10 of the CSS2.1 spec, this raises the question of why the properties don't seem to apply here. The answer to this, it would seem, is that the properties do apply, but to the pseudo-element box instead — you can see this by giving your pseudo-element a background color. Rather than replacing the pseudo-element box itself, the image is rendered as a child of the pseudo-element box, and therefore cannot be styled at all (as it would require another pseudo-element which doesn't exist).

And that lends itself to another question: why doesn't it replace the pseudo-element box altogether? Unfortunately, CSS2.1 does not specify this behavior at all, so the implementation that was agreed on is to render the content as a child of the pseudo-element box instead:

CSS2.1 doesn't really clearly define the processing model of 'content' on ::before and ::after, but the informative examples in CSS 2.1, the fact that 'content' specifies a list of things, and the desire for consistency has led to UA behavior being the following: the 'content' property specifies a list of things that become children of the ::before or ::after box.
-Boris

Hopefully this will be further addressed in CSS Generated Content level 3, on which rewriting work has just begun.

In the meantime, if you want to be able to resize the :after pseudo-element and the image that's generated, you will need to apply it as a background image instead and — assuming browser support isn't an issue — use background-size along with width and height to scale it (based on the understanding that those properties apply to the pseudo-element box instead).

CSS: Pseudo-elements :before and :after inheriting width/height from original element

:before and :after pseudo-elements are inline boxes as much as I know. Therefore, using display: block; might help you.

Is the height of a picture that is inserted by ::before or ::after controllable?

From the specification you can read:

Makes the element or pseudo-element a replaced element, filled with the specified <image>. Its normal contents are suppressed and do not generate boxes, as if they were display: none.

So the image will be inside the pseudo element and applying width/height will simply control the pseudo element not the image.

Here is an example to illustrate:

p::before {  content: url(https://picsum.photos/50/50);    /**/  border:5px solid red;  display:inline-block;  width:150px;  height:100px;  background-color:blue;}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper scelerisque arcu, non cursus nibh eleifend vitae. Fusce eget justo lorem. Duis eget felis sit amet dolor interdum placerat sagittis auctor tellus. Nunc sodales ut odio at placerat. Integer non interdum dui, id sagittis ante. </p>

:before and :after pseudo-elements exhibiting confusing behavior

You've got several items interfering with each other. But I think your main issue is this:

position:absolute; pulls elements out of the render order, causing them to render on top of static elements.

Width and Height Doesn't Seem to Work on :Before Pseudo-Element