Image with pseudo class ::before for navigation

Using Neos & Flow
1

Good morning,
I’d like to add an arrow-image to a navigation list element with the ::after-pseudoclass. Therefore I think about something like that:

.arrow_down::before {
      content: url("/resources/public/images/arrow_down_brown_18.png");
      position: absolute;
      right: 1em;
      padding-top: 0.12em;
}

How can I set a link in css directly to an image in a resource-folder?
I think this can be solved with typoscript, too, but an url in css would be much easier in my constellation.

2

Hi!
Assuming this file structure:
/resources/public/image/arrow_down_brown_18.png
/resources/public/css/style.css

You should define the url as url(../images/arrow_down_brown_18.png).

And I don’t think you can use the content property for the image. It should be defined as an background-image.
But this is a CSS question and not Neos-specific.

3

Thank you, this works.
Ok, sorry. I was wondering if I had to mind somethink neos-specific.

4

For an simple arrow you can use an character as an alternative to an image.

Arrow left:

content: “\25BA”;

Arrow down:

content: “\25BC”;

5

Thank you for the hint. I used this:

.arrow_down::before {
    position: absolute;
    content: "";    
    width: 0.4em;
    height: 0.4em;
    border-right: 0.15em solid #191970;
    border-top: 0.15em solid #191970;
    transform: rotate(135deg);
}