Question 42871 in Html Question posted in
Some basic documentation can be found here.

I want to have the content of a pseudo element ::before to be a more complex math result – Html

I want to have in the pseudo element ::before of my div a math input that takes the result of a counter and multiplies it with a constant and adds another constant afterwards.

.content-button{
    background-color: #FF7E67;
    aspect-ratio: 1/1;
    height: 75%;
}

.content-button::before {
    counter-increment: section;
    opacity: 70%;
    display: flex;
    height: 100%;
    width: 0%;
    background-color: #FAFAFA;
    position: relative;
    visibility: hidden;
    content: counter(section);
}

.content-button:hover::before {
    animation-duration: 1s;
    animation-name: slide-hover;
    visibility: visible;
    animation-fill-mode: forwards;
}

i would like the content of .content-button::before to be:
section * 10 + 1990.
Do you have any ideea on how to modify the following line to give my desired result ?
content: counter(section);

I tried using a css variable and the function attr(), but it didnt work, i kept searching the web but i couldnt find a solution that does not involve javascript.

Tags:

2

Answers


  1. 0

    Using JavaScript would be the reasonable approach. I am including a couple example attempts at meeting your requirements, only for the purpose of illustrating that they are not viable solutions.

    1. Use a JavaScript library that manipulates the document to make it appear as if your pseudo CSS rule applies the way you want. This still uses JavaScript and introduces needless complexity and confusion, so I don’t expect it to be a viable solution.

    2. If you have a limited number of expected input values, you might make a CSS rule for every expected input value. This would be very limited and would not update when then input value changed.

      input[value="0"]::before {
      content: ‘0’;
      }
      input[value="1"]::before {
      content: ‘1’;
      }

    Login or Signup to reply.
  2. 0

    Yes, this can be done by just CSS.

    Set the initial value of the counter to the constant 1990.

    Then each time you increment the counter, increment it by 10 not 1. This has the effect of ‘multiplying’ by 10 each time.

    .container {
  counter-reset: section 1990;
}

.content-button {
  background-color: #FF7E67;
  aspect-ratio: 1/1;
  height: 75%;
}

.content-button::before {
  counter-increment: section 10;
  opacity: 70%;
  display: flex;
  height: 100%;
  width: 0%;
  background-color: #FAFAFA;
  position: relative;
  visibility: hidden;
  content: counter(section);
}

.content-button:hover::before {
  animation-duration: 1s;
  animation-name: slide-hover;
  visibility: visible;
  animation-fill-mode: forwards;
}
    <div class="container">
  <div class="content-button"></div>
  <div class="content-button"></div>
  <div class="content-button"></div>
  <div class="content-button"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search