Использование псевдоэлемента 2 :: before и 2 :: after для 1 класса

Question

Привет, я могу знать, как можно использовать 2 псевдоэлемента для 1 класса или 2 класса. Я попробовал оба пути, все еще был отвергнут. Ваша помощь и совет очень ценятся.

Я пробовал 2 способа. Первый, как показано ниже

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

.custom_class::before
{

}
.custom_class::after
{

}

.custom_class::before
{

}

.custom_class:::after
{

}

Второй элемент, как показано ниже

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

.custom_class1::before
{

}
.custom_class1::after
{

}

.custom_class2::before
{

}

.custom_class2:::after
{

}

Но оба не работают. Можете пожалуйста советом по этому

------- Отредактировано ------------------

Это мой html код

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

Добавлен мой код 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);
}

Это было для анимации, когда при наведении курсора отображается строка окна Это код, который я выполнял.

Если вы хотите увидеть вывод. Вам нужно прокомментировать transx

Answer 1

В одном элементе вы не можете. Это не тот же предмет, но вы можете получить что-то похожее.

.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 2

Вы можете достичь того, чего хотите, без какого-либо псевдоэлемента:

.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 3

Вы можете иметь только один ::before и один ::after псевдоэлемент на элемент, но с некоторыми CSS magi c вы можете сделать так, чтобы псевдоэлементы дочернего элемента принадлежали его родительскому элементу. :

*::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>