0

Take a look at my code: https://codepen.io/duncanbritt/pen/LYdXVJY and direct your attention to this snippet of CSS:

.precursor::after {
    position: relative;
    content: "";
    width: 10px;
    height: 20px;
    background:rgb(179, 2, 2);
    display: inline-block;
    animation: cursor-blink 1.5s steps(2) infinite;
}

Currently, if you click on a character in the right pane of my web page, a cursor appears between it and the previous character. I would like for the cursor to not effect anything else in the document, but to still be tethered to the prior character.

If I simply change .precursor::after { position: absolute }, it looks great until I scroll. What can I do to solve this problem?

Thank you.

Duncan Britt
  • 89
  • 1
  • 6

1 Answers1

2

Solution: Use .precursor::after{ position: absolute; } as you mentioned. And just add

.precursor{ position: relative; }

to your style-sheet and it will work.

Explanation: This works because the element with position: absolute positions itself in relation to the nearest ancestor who has position: absolute or position: relative. By defining the position of the parent element as relative we are limiting the ::after pseudo element.

Ahmad
  • 36
  • 3