Using 2 ::before and 2 ::after pseudo element for 1 class

Question

Hi can i know how can use 2 pseudo element for 1 class or 2 class. I tried both ways was still being overridden. Your help and advice much appreciated.

I tried 2 ways. First as below

<div class="custom_class">
<p>Custome Text</p>
</div>

.custom_class::before
{

}
.custom_class::after
{

}

.custom_class::before
{

}

.custom_class:::after
{

}

Second wat as below

<div class="custom_class1 custom_class2">
<p>Custome Text</p>
</div>

.custom_class1::before
{

}
.custom_class1::after
{

}

.custom_class2::before
{

}

.custom_class2:::after
{

}

But both not working. Can please advice on this

-------Edited------------------

This is my html code

<div class="classOne transx transy">
        <div class="flex-row">
        <a href="/" class="classOneBtn">Custome Text</a>
    </div>
</div>

Added my code css code

.classOne {
    position: absolute;
    left: 50%;
    width: 20%;
    height: 55px;
    border-radius: 0px;
    box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
    outline: 3px solid gold;
    overflow: hidden;
    background: #ffbb00;    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    margin-left:30.6%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
a.classOneBtn
{
    color: white;
    font-family: 'Chivo Black', sans-serif;
    font-size: 18px;
    font-weight: 500;
}


.transy::before 
{
  height: 100%;
  width: 5px;
  background: white;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.transy::after 
{
  height: 100%;
  width: 5px;
  background: white;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
}

.transx::before 
{
  height: 5px;
  width: 100%;
  background: white;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.transx::after 
{
  height: 5px;
  width: 100%;
  background: white;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0;
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.transx:hover::before, .transx:hover::after 
{
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.transy:hover::before, .transy:hover::after 
{
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

This was for the animation part whereby when hover will show a line of box This the code which i was performing.

If you would like see output. you need comment the transx

Answer 1

You can achieve what you want without any pseudo element:

.box {
  display:inline-block;
  border:1px solid #000;
  padding:4px;
  background:
    linear-gradient(#fff,#fff) left,
    linear-gradient(#fff,#fff) bottom,
    linear-gradient(#fff,#fff) right,
    linear-gradient(#fff,#fff) top;
  background-repeat:no-repeat;
  background-origin:content-box;
  background-size:5px 0%,0% 5px;
  background-color:orange;
  transition:0.5s;
}
.box:hover {
  background-size:5px 100%,100% 5px;
}

.box a {
  display:inline-block;
  padding:20px 50px;
}

<div class="box">
<a href="">text</a>
</div>

Answer 2

In the same element you can not. It is not the same item but you can get something similar.

.transx{
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.classOne {
    text-align: center;
    position: absolute;
    left: 50%;
    width: 20%;
    height: 55px;
    border-radius: 0px;
    box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
    outline: 3px solid gold;
    overflow: hidden;
    background: #ffbb00;    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
    margin-left:30.6%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
   
}
a.classOneBtn
{
    color: white;
    font-family: 'Chivo Black', sans-serif;
    font-size: 18px;
    font-weight: 500;
}


.transy::before 
{
  height: 100%;
  width: 5px;
  background: white;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.transy::after 
{
  height: 100%;
  width: 5px;
  background: white;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
}

.transx::before 
{
  height: 5px;
  width: 100%;
  background: white;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.transx::after 
{
  height: 5px;
  width: 100%;
  background: white;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0;
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.transx:hover::before, .transx:hover::after 
{
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.transy:hover::before, .transy:hover::after 
{
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

<div class="classOne transy">
  <div class="transx"></div>
        <div class="flex-row">
          <a href="/" class="classOneBtn">Custome Text</a>
         </div>
</div>

Answer 3

You can only have one ::before and one ::after pseudo-element per element, but with some CSS magic you can make it look like the pseudo-elements of a child element belongs to its parent:

*::before,
*::after {
  display: block;
}

.custom_class1::before {
  content: "outer before"
}

.custom_class1::after {
  content: "outer after"
}

.custom_class1 p::before {
  content: "inner before";
  position: absolute;
  top: -18px;
}

.custom_class1 p::after {
  content: "inner after";
  position: absolute;
  bottom: -18px;
}

.custom_class1 p {
  position: relative;
  background-color: lightblue;
}

.custom_class1 {
  background-color: pink;
  display: inline-block;
}

<div class="custom_class1 custom_class2">
  <p>Custome Text</p>
</div>