How to position an ':after' pseudo-element at end of its owner? - html

Question

I would like to get result something like this:
◄ ███████ ►
Is it possible to make arrows with pseudo-elements :before and :after?
JSFiddle example which demonstrates the problem
<div class="scroll"></div>
.scroll {
width: 100px;
}
.scroll::before {
content: "◀";
}
.scroll::after {
content: "▶";
}

Answer 1

Here it is.
.scroll {
width: 100px;
background-color: grey;
margin: 0 1.2em;
position: relative;
overflow: visible;
min-height: 1.2em;
}
.scroll:before,
.scroll:after {
position: absolute;
color: grey;
min-height: 1.2em;
width: 1.2em;
top: 50%;
transform: translateY(-50%);
line-height: 1.3em;
text-align: center;
}
.scroll:before {
content: "◀";
right:100%;
}
.scroll:after {
content: "▶";
left: 100%;
}
<div class="scroll"></div>
Update. Following discussion in chat, here's how I'd style custom scrollbars on a div. Please note that as of now they are just painted, the div changes size based on content. I know nothing about the logic behind your need to paint scrollbars instead of trusting browsers with it. :)

Answer 2

This is sort of a hack but it works. It involves setting margins.
Here is the updated fiddle
https://jsfiddle.net/j08L8a3b/1/
.scroll {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
.scroll::before {
content: "◀";
color: grey;
margin-left: -20px;
background-color: white;
height: 100%;
min-height: 100%;
}
.scroll::after {
content: "▶";
margin-left: 120px;
color: grey;
background-color: white;
}