Using :Before CSS Pseudo Element to Add Image to Modal

Using :before CSS pseudo element to add image to modal

http://caniuse.com/#search=::after

::after and ::before with content are better to use as they're supported in every major browser other than Internet Explorer at least 5 versions back. Internet Explorer has complete support in version 9+ and partial support in version 8.

Is this what you're looking for?

.Modal::after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

If not, can you explain a little better?

or you could use jQuery, like Joshua said:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

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>

Possible to add image caption with css pseudo content?

Yeah, ::before and ::after don't work on images. But you can apply them to the wrapper
link:

a{
  position: relative;
}

a, a > img{
  display:inline-block;
}

a::before{
  content: 'theres a better way';
  position: absolute;    
  left: 0;
  top: 0;     
  width: 80%;
  height: 20px;
  left: 10%;  
  background: #000;
  opacity: 0.4;      
  color: red;
  font-size: 18px;
}

demo

If you want the text added in the HTML, you'll have to put a real element with it in your link (and apply the same rules to it, but without content)

Getting :before pseudo element to use background image of parent

Inherit must work for pseudo-elements: http://jsfiddle.net/kizu/GaUsp/

Are sure, you've added all the needed properties like content, display and dimensions so the pseudo-element have a box where background must be shown?

CSS Overlay with pseudo element

It probably isn't working because the pseudo-element isn't generated if the content value is omitted. The default content value is none, which is likely why you aren't seeing the pseudo element. Therefore you need to specify a value other than none for the content property:

.modal:after {
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

It's also worth mentioning that since a pseudo element is essentially added as a child element, it will be positioned above the .modal element since a stacking context is established. To work around that, you could add a :before pseudo element to the .modal element's parent like this:

.modal {  position: fixed;  top: 100px;  margin-left: auto;  margin-right: auto;  left: 0;  right: 0;  width: 500px;  border: 2px solid #736D61;  background: #fff;  padding: 10px;}
.modal-overlay:before {  content: '';  position: fixed;  top: 0px;  left: 0px;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);}

<div class="modal-overlay">  <div class="modal">MODAL</div></div>

Possible to add image caption with css pseudo content?

Yeah, ::before and ::after don't work on images. But you can apply them to the wrapper
link:

a{
  position: relative;
}

a, a > img{
  display:inline-block;
}

a::before{
  content: 'theres a better way';
  position: absolute;    
  left: 0;
  top: 0;     
  width: 80%;
  height: 20px;
  left: 10%;  
  background: #000;
  opacity: 0.4;      
  color: red;
  font-size: 18px;
}

demo

If you want the text added in the HTML, you'll have to put a real element with it in your link (and apply the same rules to it, but without content)

Center an image inserted with after: pseudo-element; can't use spans

Try this:

.tumblr_post:after {
    content: url("../img/flower.png");
    display: block;
    margin: 42px auto 24px;
    position: relative;
    text-align: center;
    width: 100%;
}

Css set gradient image background with pseudo element

In order to achieve your goal, you should insert another div as a wrap content. Check the code below:

.modal {
    width: 100%;
    max-width: 300px;
    height: 100%;
    position: relative;
}

.modal__wrap {
    max-height: 200px;
    overflow: auto;
    background-color: #fff;
    padding: 25px 40px 15px; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}

.modal__wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(90deg, rgba(255, 79, 137, .3) 0%, rgba(255, 199, 150, .3) 100%);
    opacity: 0.3; 
  display:flex;
  flex-direction: column;
}

<div class="modal">
  <div class="modal__wrap">
       <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
       </div>
  </div>
</div>

Pseudo-element :after is adding before instead

:after and :before have to include content property.

.chapter-heading:after {
  content: "";
  display: block;
  position: absolute;
  width: 30%;
  height: 1px;
  background-color: $scoops-grey-400;
  left: 35%;
}

Make sure .chapter-heading class have position: relative.

You should add top: 100% or bottom: 0 for .chapter-heading:after to make a underline.

Using :Before CSS Pseudo Element to Add Image to Modal