对1类使用2 :: before和2 :: after伪元素

时间：2020-04-23 15:40:15

标签： css

嗨，我能知道如何为1类或2类使用2个伪元素。我尝试两种方法仍然被覆盖。非常感谢您的帮助和建议。

我尝试了两种方法。首先如下

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

.custom_class::before
{

}
.custom_class::after
{

}

.custom_class::before
{

}

.custom_class:::after
{

}

第二个wat如下

<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代码

.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

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

每个元素只能有一个::before和一个::after伪元素，但是借助一些CSS魔术，您可以使其看起来像子元素的伪元素属于其父元素： 

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

答案 2 :(得分：0)

您可以在没有任何伪元素的情况下实现所需的目标：

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

相关问题
最新问题