How to display a horizontal line with squares above a title in ::after pseudo-elements way-CodePudding

I want to create this appearance.

I can do this with 2 inner div. However, However, if I want to try a different way,::after pseudo-elements, I cannot do it, see my code, and cannot move the square to the left a bit. Also, how can I make it smaller?

* {
  box-sizing: border-box;
}

.container {
  height: 41px;
  width: 122px;
  position: relative;
  background-color: red;
  margin: 20px;
}

.inner {
  width: 100%;
  height: 50%;
  position: absolute;
  border-right: 20px solid black;
  left: 40px;
  z-index: 10;
}

.projects{
  font-family: sans-serif;
  font-size: 2rem;
  letter-spacing:1px;
  margin: 20px;
}

<div >
  <div >
  </div>
</div>
<div >projects</div>

.over-line {
  
font-family: sans-serif;
text-align: left;
text-transform: uppercase;
margin-top: 6rem;
display: inline-block;
position: relative;
}


.over-line::after {
content: "";
position: absolute;
top: -3rem;
height: 30px;
width: 99%;
left: .5%;
background-color: #f84ee7;
border-right: 30px solid #1948e2; 
}

    <div >Projects</div>

CodePudding user response：

You need the after element to be wider than the main element so that pink square can be to the right.

One way of doing this is to remove the border of the after and instead use a linear-gradient as its background image. This has the blue followed by transparent followed by the pink.

In this snippet CSS calc is used to size the different colors.

.over-line {
  font-family: sans-serif;
  text-align: left;
  text-transform: uppercase;
  margin-top: 6rem;
  display: inline-block;
  position: relative;
}

.over-line::after {
  content: "";
  position: absolute;
  top: -3rem;
  height: 30px;
  width: 99%;
  width: calc(100%   60px);
  left: .5%;
  background-image: linear-gradient(to right, #1948e2 0 calc(100% - 60px), transparent calc(100% - 60px) calc(100% - 30px), #f84ee7 calc(100% - 30px) 100%);
  background
}

<div >Projects</div>

CodePudding user response：

.over-line {
  font-family: sans-serif;
  text-align: left;
  text-transform: uppercase;
  margin-top: 6rem;
  display: inline-block;
  position: relative;
}

.over-line::before {
  content: "";
  position: absolute;
  top: -3rem;
  height: 30px;
  width: calc(100%   30px);
  left: .5%;
  background-image: linear-gradient(to right, #1948e2 0 calc(100% - 30px), transparent calc(100% - 30px) calc(100% - 17px), #f84ee7 calc(100% - 17px) 100%);
}

.over-line::after {
  content: "";
  position: absolute;
  top: -2rem;
  height: 15px;
  width: calc(100%   60px);
  left: .5%;
  background-image: linear-gradient(to right, #1948e2 0 calc(100% - 60px), transparent calc(100% - 60px) calc(100% - 50px), #fff calc(100% - 50px) 100%);
}

<div >Projects</div>