CSS Container Pseudo Element

CSS container pseudo element?

The old CSS3 Generated and Replaced Content Module had a proposal for an ::outside pseudo-element which seems close to what you describe, but there are no implementations, and the module itself is slated for a rewrite... someday.

In other words, there's currently no way to achieve this using only CSS, and there probably won't be any for a while.

Of course, there are ways to emulate wrapping elements using JavaScript to manipulate the DOM, but that's just about the only way you can achieve this besides hardcoding in the extra markup. Some trivial jQuery methods with respect to the fabled ::outside pseudo-element are described here:

Enable support for CSS3 ::outside pseudoelement

how can I put a :after pseudo element as the container for sibling elements?

First off, the list-style: none declaration you have on the list element <li> doesn't have any effect. It should added to the unordered list <ul> style block.

As the picture doesn't include the red color, I assume you wanted to keep that. Here is a solution using pseudo elements. Specifically, using the ::after element and positioning the black box right underneath the flag <img>. Then positioning the "colombia" and "south america" text using position: relative to move them into the alignment you wanted in the image.

Since your using a heading element <h3> for the "colombia" text it will have a larger font-size and font-weight than the <div> with text "south america". You could give them both similar font sizes and font weights to make them look "alike" unless you were going for a mismatched size appearance.

img{
 width:300px;
 height:300px;
}

ul {
  list-style: none;
}

/* Make <h3> and child <div> have same font-size and weight (remove this if you want them to be different size) */
ul li h3,
ul li div {
  font-size: 1.25rem;
  font-weight: 400;
}

ul li .country {
  position: relative;
  color: #fff;
  z-index: 99;
  top: -5rem;
  left: 4.5rem;
}

ul li .continent_ubication {
  position: relative;
  color: #2E86C1;
  z-index: 99;
  left: 7.5rem;
  bottom: 4.5rem;
}

li:after{
 content: "";
 position: absolute;
 top: 15rem;
 width: 300px;
 height: 110px;
 z-index: 5;
 background-color: black;
}

<ul class="offers">
  <li>
      <img  src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Colombia.svg" alt="Flag of Colombia">
      <h3 class="country">colombia</h3>
      <div class="continent_ubication">south <span class="text_continent" >america</span></div>
  </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:

....

4. 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:
   
   
   1. 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.
   2. 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>

Is it possible to generate an HTML div with CSS ::after pseudo element

You can use the code below to achieve the needed effect:

   .element-container{    display: flex;    position:relative;    width: 300px;    height: 100px;    z-index: 1;}.element{    width: 100%;    height: 100%;    position: absolute;    background-color: Transparent;    background-repeat:no-repeat;    border-radius: 20px;    display: inline-block;    border: 2px solid black;}.element:after{    content:'';    display: inline-block;    top: 10%;    left: 4%;    border-radius: 20px;    background-color: yellow;    height: 100%;    width: 100%;    position: absolute;    z-index: -1;}

<div class="element-container">  <div class="element"></div></div>

CSS - before pseudo element behind element text

Just set z-index to childs of container.

.container {
  height: 10rem;
  background-color: blue;
  color: white;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  background-color: red;
}

.container>* {
  position: relative;
  z-index: 2;
}

<div class="container">
  <h1>This is a title</h1>
</div>

Pseudo element from edge of screen to edge of container

Updated the answer

I think this will work for you:

Just changed .title-detail::after {width: calc(((100vw - 1170px)/2) - 10px);} and it worked fine for me. For proving my point I have removed the .overflow-hidden.

Explained - .title-detail::after {width: calc(((100vw - 1170px)/2) -
10px);} that is .title-detail::after {width: calc(((Screen Width -
.container width[this has to handiled through mediaquery with
bootstrap] )/margins of both side) - small gap handled);}

/*.overflow-hidden {  overflow-x: hidden!important;  width: 100%;}*/
.title-detail {  position: relative;  display: inline-block;}
.title-detail::after {  content: '';  position: absolute;  display: block;  width: calc(((100vw - 1170px)/2) - 10px);  height: 0.25rem;  right: calc(100% + 2.25rem);  background-image: linear-gradient(to right, rgb(72, 184, 171) 0%, rgb(97, 157, 191) 100%);  top: 50%;  transform: translateY(-50%);}
.column-count-2 {  column-count: 2;  column-gap: 2rem;  column-rule: none;}
@media (min-width: 992px) {  .title-detail::after {    width: calc(((100vw - 970px)/2) - 10px);  }}
@media (min-width: 768px) {  .title-detail::after {    width: calc(((100vw - 750px)/2) - 10px);  }}

<!-- Bootstrap core CSS --><link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<div class="overflow-hidden">  <div class="container">    <div class="row justify-content-center">      <div class="col-12 col-md-10 col-xl-8">        <h1 class="title-detail">title of page</h1>        <div class="column-count-2">          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus metus, lacinia sed erat vitae, dictum ullamcorper urna.</p>        </div>      </div>    </div>  </div></div>

Image divider above footer using ::before pseudo element

You can make space for the border by setting a top margin on the footer.

Then you can put a before pseudo element on it which has bottom 100% (ie sits on top of the footer) and it can have a width of 100% (I don't think you need to set a specific px value as you have done) and height of 100px.

footer {
  background: #555;
  position: relative;
  margin-top: 100px;
}

footer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 100%;
  left: 0;
  display: inline-block;
  background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
  background-color: #555;
  background-position: center;
  background-attachment: fixed;
}

<footer>
  <div class="container">
    <div class="row">
      <div class="col">
        <h4>Cat 1</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">A</a></li>
          <li><a class="nav-link" href="#">B</a></li>
          <li><a class="nav-link" href="#">C</a></li>
        </ul>
      </div>
      <div class="col">
        <h4>Cat 2</h4>
        <ul class="nav flex-column">
          <li><a class="nav-link" href="#">D</a></li>
          <li><a class="nav-link" href="#">E</a></li>
          <li><a class="nav-link" href="#">F</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

---

Related Topics