Strange behavior occurs when CSS content elements utilize :before pseudo element with images

I'm having trouble placing three different images in front of some list points on my website. It doesn't seem to be working the way I intended. Can anyone offer some assistance? Currently, it appears like this: CSS content

Despite using :before, the images are not aligning properly next to the text, and they appear larger than I would like. How can I make them smaller and position them correctly?

Here is the CSS code I have implemented:

a[href*="bron.pdf"]:before {
    content: url("PDF%20img%20.gif");
}

a[href*="bron.vcf"]:before {
content: url("vcard-icon.png");
}

a[href*="bron.jpg"]:before {
content: url("adobe%20img%20.png");
}

This is the HTML code being used: 

<section>
   <h4>Downloads</h4>
        <ul>
           <li><a href="bron.pdf" data kb="1267">project_CMDA_Moet_ik_rennen.pdf</a> (1.3MB)</li>
           <li><a href="bron.vcf">Contactgegevens_CMDA_Moet_ik_rennen.vcf</a></li>
          <li><a href="bron.jpg" data-kb="569">Poster_CMDA_Moet_ik_rennen.jpg</a> (569KB)</li>
        </ul>
</section>

Can anyone point out what I might be doing incorrectly?

htmlcsselement

Answer №1

To effectively handle this situation, consider using a background-image instead of a regular image to have more control over the height and width adjustments. Utilize display: inline-block to ensure that the text and image are displayed next to each other.

a:before {
    content:"";
    display:inline-block;
    width: 20px; 
    height: 18px;
    background-size: cover;   
}

(Be sure to adjust the height and width based on your specific requirements).

Next, apply the background-image property to each relevant element

a[href*="bron.pdf"]:before {
    background-image: url("PDF%20img%20.gif");
}

a[href*="bron.vcf"]:before {
    background-image: url("vcard-icon.png");
}

a[href*="bron.jpg"]:before {
    background-image: url("adobe%20img%20.png");
}

Check out this working example for reference

Answer №2

To ensure proper display, it is essential to define the height and width of images according to your desired dimensions. Consider utilizing display:inline for both the images and text containers (e.g., p tag), or alternatively, utilize float:left for image alignment if needed.

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

Position the image right beside the <h> heading

Just recently, I embarked on the journey of learning HTML and CSS. However, I have encountered a challenge: #referenzen{ width: 100%; padding: 25px; } #referenzen h1, h2, h3, h4, h5, h6{ margin-bottom: 0; } ...

htmlcss

Animate the appearance of list items sequentially using CSS animations

Is there a simpler way to achieve the effect of having list items slide in one after the other? The CSS method provided here seems quite intricate. #nav ul.is-visible{visibility:visible;opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transfo ...

jquerycss

Ensuring the validity of a signed cookie in Node using Express

I'm currently working on incorporating signed cookies in Node's express module. I've reviewed the documentation, but I'm struggling to understand how to properly verify them. My understanding is that verification must occur on the serve ...

javascripthtmlnode.jscookiesexpress

What is the best way to extract the text inside a div element based on the input value in a

I attempted to extract the innerText of a div along with the input values within it. For instance: <div> My name is Shubham, I work for <input type="text"/> for the last 5 years.</div> My objective is to retrieve all the text ...

javascripthtmlreactjs

Text overflow occurs when content overflows the space of its container, causing the HTML element to

My English isn't the greatest, but I hope to convey the question clearly. I am attempting to create an editable text within a div. Typically, the text will overflow the size of the div, so I need to contain the text in the div using overflow:scroll. ...

htmlcssscrolltooltipoverflow

Tips for managing CSS/style conflicts in JavaScript/AngularJS applications

I am new to AngularJS and I have a requirement to assign CSS properties to a component at the JavaScript file level. When I debug my code after applying the CSS styles to the component, I can see that all the applied CSS properties are behaving as expected ...

javascriptjqueryhtmlangularjscss

Issue with hashtag in regular expressions

Looking for a way to identify and link hashtag words with an anchor tag? Here's a snippet showcasing the concept: <p class="display"></p> var content = "I enjoy #blueSky. My favorite color is #green. #sky is amazing"; ...

javascriptjqueryregexhtml

Failure of Highchart's resizing mechanism when hidden

Check out this AngularJS demo app featuring Highcharts: http://jsfiddle.net/dennismadsen/dpw8b8vv/1/ <div ng-app="myapp"> <div ng-controller="myctrl"> <button ng-click="hideView()">1. Hide</button> <button ng ...

cssangularjshighcharts

Creating a customizable drop-down menu in PHP

I need help creating a dropdown list that populates with the options from a database table. $qry3 = "SELECT * FROM employees WHERE buss_id_fk = '{$_SESSION ['user_id']}' "; $result3 = mysqli_query ( $con, $qry3); while ($r ...

phphtmlmysqlmysqli

Safari and Internet Explorer 9 prioritizing min-height over height in rendering

For testing a website, I am using Safari 5.0.5 and IE9 on Windows. Within the CSS file, the following code is present: #contentarea { background-image:url('../images/img.jpg'); background-repeat: no-repeat; background-position: right to ...

jqueryhtmlcss

Obtaining IDs of Divs that have been Dragged into a Drop Zone upon Clicking a Button using JavaScript

I'm currently working on a solution to extract the ids of dragged divs once they have been placed in the drop zone. Each drag component is assigned an id ranging from drag1 through drag8, while the drop zone is labeled as div drop zone. Since there a ...

javascriptjqueryhtmlcss

I'm encountering an issue in Django where I am struggling to retrieve the id from the HTML. The specific error message reads: "The field 'id' was expecting a number but received a different value

Once the user selects a translator name, my aim is to retrieve the selected translator's information in Django using their ID and store it in an appointment table within the database. However, I encountered an error when trying to match the ID, which ...

pythonhtmldjango

Is your max-height transition not functioning properly?

Is there a way to create a collapsible panel using only CSS similar to the Bootstrap bootstrap collapse panel? Why isn't the max-height transition working for me? How can I toggle the panel if it's checked, and have the panel collapse when d ...

csstransition

maxCalendar - Retrieve outcomes without relying on indexOf()

Good day! I have a property in my code that utilizes the eventRender function to return events based on a specific keyword input by the user. While this works well for exact matches, I am striving to enhance it to include partial matches such as letters o ...

javascriptphphtmljqueryfullcalendar

Personalized Owl Carousel - OWL.JS Hover Pause Feature

I have been working on a slider in Codepen that is functioning well, and now I am trying to tweak it for my website. My goal is to make the carousel pause when someone hovers over it. I've experimented with all the options available on the owl slider ...

javascriptjqueryhtmlcssowl-carousel

What is the best way to place content in a single div without it being divided into several separate boxes

Here is my code snippet: <div class="col-md-9"> <div id="statbox"> {% for obj in product_type %} {% for obj1 in vastu %} <script type="text/javascript"&g ...

javascripthtmlcssdjango

Switching Background Colors with CSS

Can you change background colors using only CSS3? I attempted to use keyframe animations, but they only transition the background color. I simply want the background color to change after 5 seconds with no transition or hover effects. If I can fade it in ...

csscss-transitionsbackground-color

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

javascripthtmljquery

What is the best way to change the font size in HTML?

https://i.sstatic.net/IjLvn.png After carefully analyzing the image provided, I encountered an issue while attempting to incorporate the code display:block. However, no changes were reflected. Can you identify what may be causing this discrepancy in my te ...

htmlcss

Is it possible for browser sync to replace a CSS file hosted on a CDN upon injection?

Trying to solve a dilemma with my Shopify theme. Working on my Shopify theme, I find it frustrating that I have to constantly save my CSS changes, switch tabs, and reload the browser to see updates. While I know about the theme gem, it doesn't provid ...

cssgulpshopifybrowser-sync