CODEWITHSUNDEEP
css
15 Volts
15 Volts

Reputation: 2077

::before with the same content as the first child

I am creating various css buttons that looks like this:

body {
  height: 100vh ;
  display: flex ;
  flex-direction: column ;
  justify-content: center ;
  align-items: center ;
}

.btn {
  position: relative ;
  padding: 10px 20px ;
  overflow: hidden ;
  margin: 2px ;
  display: flex ;
  align-items: center ;
  background-color: transparent ;
  color: #912BFF ;
  text-decoration: none ;
  font-size: 15px ;
  border-radius: 4px ;
  border: 2px solid #912BFF ;
}

.btn::before {
  content: 'Hello 1' ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 100% ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
  background-color: #912BFF ;
  color: #fff ;
  transition: all 0.5s ease ;
  opacity: 0 ;
  transform: scale(2) ;
}

.btn:hover::before {
  transform: scale(1) ;
  opacity: 1 ;
}
<body>
  <a href="#" class="btn">Hello 1</a>
  <a href="#" class="btn">Hello 2</a>
  <a href="#" class="btn">Hello 3</a>
  <a href="#" class="btn">Hello 4</a>
  <a href="#" class="btn">Hello 5</a>
  <a href="#" class="btn">Hello 6</a>
  <a href="#" class="btn">Hello 6</a>
  <a href="#" class="btn">Hello 7</a>
</body>

Now instead of having 'Hello 1' as the contents, I want to have the content match for the other classes as well. So when the content is 'Hello 2' for the link, the ::before pseudo element will also have the 'Hello 2' content so that it could work with any buttons created dynamically.

Upvotes: 1

Views: 82

Answers (2)

Krzysztof Antosik
Krzysztof Antosik

Reputation: 993

I think it's important to be satisfactory. It is easily editable because you only need to change one attribute and you don't have to write the same in two places.

body {
  height: 100vh ;
  display: flex ;
  flex-direction: column ;
  justify-content: center ;
  align-items: center ;
}
[data-content] {
  position: relative ;
  padding: 10px 20px ;
  overflow: hidden ;
  margin: 2px ;
  display: flex ;
  align-items: center ;
  background-color: transparent ;
  color: #912BFF ;
  text-decoration: none ;
  font-size: 15px ;
  border-radius: 4px ;
  border: 2px solid #912BFF ;
}

[data-content]:after {
content: attr(data-content) ;
}

[data-content]:before {
  content: attr(data-content) ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 100% ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
  background-color: #912BFF ;
  color: #fff ;
  transition: all 0.5s ease ;
  opacity: 0 ;
  transform: scale(2) ;
}

[data-content]:hover::before {
  transform: scale(1) ;
  opacity: 1 ;
}
<body>
  <a href="#" data-content="Hello 1"></a>
  <a href="#" data-content="Hello 2"></a>
  <a href="#" data-content="Hello 3"></a>
  <a href="#" data-content="Hello 4"></a>
  <a href="#" data-content="Hello 5"></a>
  <a href="#" data-content="Hello 6"></a>
  <a href="#" data-content="Hello 7"></a>
  <a href="#" data-content="Hello 8"></a>
</body>

Upvotes: 2

CanUver
CanUver

Reputation: 1774

Css: 

.btn::before {
  content: attr(data-text);
}

Html: 

    <a href="#" class="btn" data-text ="Hello1">Hello 1</a>
    <a href="#" class="btn" data-text ="Hello2">Hello 2</a>
    <a href="#" class="btn" data-text ="Hello3">Hello 3</a>
    <a href="#" class="btn" data-text ="Hello4">Hello 4</a>
    <a href="#" class="btn" data-text ="Hello5">Hello 5</a>
    <a href="#" class="btn" data-text ="Hello6">Hello 6</a>
    <a href="#" class="btn" data-text ="Hello7">Hello 7</a>
    <a href="#" class="btn" data-text ="Hello8">Hello 8</a>

If I understand you correctly, that's what you want. it will now dynamically change according to the data-text attribute you gave.

Upvotes: 2

Related Questions