Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subsequent lines will align left with the decoration instead of aligning with the text on the first line, which doesn't look as nice.

To better explain what we are trying to accomplish, I have created a fiddle. The .fake class is just for demonstration purposes and not an actual solution: https://jsfiddle.net/p0jLoyqz/

.decorated::before {
    content: ">",
    font-weight: 800
}

One possible solution could be to wrap the anchor in another element and add the decoration to the wrapper. However, it would be best to minimize the markup as much as possible.

css

Answer №1

To create an effect, adjust the pseudo element with a position:absolute;, aligning it to the left by setting left:0;, and apply a padding of either 10px or 15px to the container.

.small-box {
    width: 120px;
    border: 1px solid gray;
    padding-left: 10px;
    position: relative;
}
.small-box a::before {
    content: '>';
    display: inline-block;
    position: absolute;
    left: 0px;
}
<div class="small-box">
    <a class="fake" href="#">my link that line breaks</a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect. I have 3 child div's structured as follows: <div class="parent"> <div class="child1">A</div> <div class="child2">B</div> <div class="child3">C</div ...

htmlcss

What is the best way to showcase a Table and an Image side by side in HTML using inline

Can someone help me figure out how to align my image and table on the same level? I've been struggling to get "inline-block" to work. :( <p id="play"> hey </p> <div id="menu"> <table> <tr> <td>Models</td& ...

htmlcsslayout

"Implementing master page and CSS styles on a child page: A step-by-step

Currently, I have a master page that is successfully being applied to all of my pages. However, it seems to be encountering an issue when trying to locate the CSS file address for pages within child folders. The folder structure looks like this: <scri ...

asp.netcssmaster-pages

Display of Navigation Bar in Angular is Not Proper

Currently diving into the world of Angular, I've encountered an issue with a material menu that isn't displaying correctly. The expected outcome based on my code should resemble this image: https://i.stack.imgur.com/z70Aq.png This snippet showc ...

javascripthtmlcssangular

Scrolling vertically using window.open functionality

I am trying to open a pop-up window using window.open. I would like the scrollbars to appear only if necessary. Unfortunately, in Safari, the scrollbars do not show up unless I include scrollbars=1 in the code. However, this also causes horizontal scrollb ...

javascriptcsspopup

How can I adjust the container to fit the monitor's dimensions while still keeping the

I am currently facing an issue on my website where the main content div has a fixed height, causing it not to scale vertically on larger monitors. I attempted setting the CSS properties for the div to 'auto' in order to allow it to adjust to the ...

csshtmlscrollbarcontainersscale

Is it possible to generate an image from HTML using PHP?

Can anyone suggest a way to generate an image from pure HTML using PHP, possibly utilizing the GD library or other similar tools? I am looking to display icons from external sites and considering if creating an image would help improve load times. If not ...

phphtmlcssimagefile

Ways to disable HTML loading prior to CSS loading

After downloading a site template, I observed that the HTML is loaded first before the CSS. Is there a way to disable this? I am looking to create a preloader for the website. ...

htmlcss

Tips for shifting objects from a horizontal row to a designated vertical column when switching to a smaller display

I am currently utilizing bootstrap to enhance my website layout for mobile view. The main challenge I'm facing involves transitioning items from a row to a column in a specific order. In this case, I have two items in a row and I would like the first ...

htmlcssbootstrap-4

Is it possible for a div to extend beyond the previous div's boundaries using CSS?

When viewing a website like GameFAQs, you may notice that there are two divs positioned next to each other - the main content and an aside (such as a poll). As you resize the window, the aside sometimes moves down below the main content without leaving any ...

htmlcss

What is the best way to place a p-growl element in the bottom right corner of the page?

I've been struggling to fix the positioning of my growl message at the bottom right corner by overriding the CSS classes of p-growl. Initially, I attempted to override the .ui-growl class like this: ::ng-deep .ui-growl { position: fixed; b ...

cssangularangular5primeng

In Angular, a white screen may suddenly appear if the scrolling speed is too fast

My experience has been primarily on Chrome. I've noticed that when I scroll for a long time, the data on the screen disappears briefly and then reappears after a few seconds. Is there a resolution for this problem? Thank you, ...

javascripthtmlcssangulartypescript

Ensure the background image is optimized for viewing on screens of any size

I am facing an issue with an image on my website that serves as the background for some elements. The image is wider than it is tall, causing problems for users viewing the site on phones. Is there a way to cut off the sides of the image and ensure it fits ...

htmlcssbootstrap-5

Tips for resolving CSS issues in a vast style sheet

I'm currently facing a challenge with modifying the CSS of a Wordpress plugin I need to utilize. The learnpress.css stylesheet is very extensive, spanning over 2000 lines, making it quite complex to comprehend. All I am trying to achieve is a simple t ...

cssgoogle-chrome-devtoolsbackground-color

Personalized jQuery Slider, Go back to initial slide

Working on enhancing my jQuery skills by constructing a basic slider with 3 slides. The slider wrapper, with a fixed width of 1400px and a height of 350px serves as the outer container. Within this wrapper lies an unordered list where its items are floate ...

javascriptjqueryhtmlcss

issues with jquery functionality on mobile devices

I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing t ...

javascriptjqueryhtmlcss

Store <td> in a variable

At the moment, I have a script that allows users to input an item name, along with its size, color, and other options. Each of these entries is saved as individual items with their custom specifications, such as a black t-shirt in large size. The script c ...

javascriptjqueryhtmlcssjquery-ui

Attempting to connect CSS to an HTML document within a Django development project

Directories Here is a photo of my directories. I am currently trying to utilize sudokuStyle.css in sudoku_board.html, but for some reason it does not appear to be linking properly in my HTML file. Below is the code snippet from my head section: {% load st ...

htmlcssdjangoweb

Manipulating parent based on first child using CSS

Is it possible to manipulate the parent element using CSS based on the presence of a specific child? For instance, I want to style a table cell differently if the first child within it is a link. <td>Hello</td> <td><a href="go.html"& ...

css

Creating a responsive layout in HTML/CSS where the div element expands to fill the entire vertical space of its parent

Looking for assistance in creating a webpage layout like the one shown in this fiddle... http://jsfiddle.net/jeljeljel/5BSva/ I need the vertical line on the left side navigation tab to extend all the way down to the footer at the bottom of the page. Th ...

htmlcss