CSS implementation of the “plus sign” effect of the example code

Time:2019-5-31

Achieve the plus sign effect of the following figure:

加号

To achieve this effect, only one div element is needed.

CSS needs to be used for before and after, as well as border features.

Set up a div note first


 <div class="add"></div>

Set another border:


.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

At this point, the border is as follows:

初始图片

We can use the pseudo-Class before and its border-top to set a “horizontal”:


.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}

Notice that we have made absolute positioning. This became the case:

加横

Referring to the above, we can set up a “vertical” using the after pseudo class and border-bottom:


.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

Add the hover pseudo class to set the color of the mouse hovering up:


.add:hover {
  color: blue;
}

The final pattern:

finally-picture

When the mouse is hovering up, it will change color:

change-color

You can see the effect here:

https://jsbin.com/quvidap/edit?html,css,output
 

summary

The above is an example code of CSS implementation of “plus sign” effect introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message for me, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.

Recommended Today

A detailed explanation of the differences between Perl and strawberry Perl and ActivePerl

Perl is the abbreviation of practical extraction and report language “practical report extraction language”. Application of activestateperl and strawberry PERL on Windows platformcompiler。 Perl   The relationship between the latter two is that C language and Linux system have their own GCC. The biggest difference between activestate Perl and strawberry Perl is that strawberry Perl […]