Home > Web Front-end > CSS Tutorial > How to Create a Border Overlay for Child Divs with Pseudo Elements?

How to Create a Border Overlay for Child Divs with Pseudo Elements?

Barbara Streisand
Release: 2024-11-10 21:44:03
Original
848 people have browsed it

How to Create a Border Overlay for Child Divs with Pseudo Elements?

Creating a Border Overlay for Child Divs

Problem:

You need to design a border that overlays the content of a child div, similar to the image provided.

HTML and CSS Code:

<div class="box-border box-border-participe">
  <div class="box-participe">
    <a>Participe</a>
  </div>
</div>
Copy after login
.box-participe {
  background-color: #94C120;
  padding: 10px 40px;
}
Copy after login

Solution:

To achieve this using pseudo elements, you can create a border and avoid extra markup. You can also control its position and size effortlessly:

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}
Copy after login

By using this method, you can easily create a stylish border overlay for your child divs, enhancing the visual appeal of your website.

The above is the detailed content of How to Create a Border Overlay for Child Divs with Pseudo Elements?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template