Utilizing the :after pseudo-element for placing text in a specific location

Here's the code I'm working with:

    div#myImg{
        background: url('myimage.png') left top no-repeat;
    }

    div#myImg:after{
        content: 'TEXT UNDER IMAGE';
        margin:0 auto;
        vertical-align:text-bottom;
        font-size: 14px;
    }           

    .dm_lp_imgs{
        width: 100px;
        float:left;
        height: 115px;
        margin-right: 15px;
    } 


    <div id="myImg" class="lp_imgs"></div>

I understand that you can use the :after pseudo selector to add text, but my goal is to position it centered just below the image. Is this achievable using the :after pseudo selector?

Currently, the text appears stuck at the top of the div#myImg element.

UPDATE:

display:block

Adding this line didn't solve the issue...

css

Answer №1

My preferred method for achieving this is by utilizing CSS properties such as position. To accomplish the desired effect, set the parent element to have a position:relative, include position:absolute in the ::after pseudo-element, and assign it a top:100%.

http://jsfiddle.net/s22Af/

div#myImg:after{
    content: 'TEXT UNDER IMAGE';
    margin:0 auto;
    vertical-align:text-bottom;
    font-size: 14px;

    position:absolute;
    top: 100%;
    text-align: center;
}           

.dm_lp_imgs{
    width: 100px;
    float:left;
    height: 115px;
    margin-right: 15px;

    position: relative;
}

Answer №2

If you want to position pseudo elements absolutely in relation to their parent element, simply apply position: relative to the parent div and position: absolute to the :after CSS selector. You can then position it using the standard methods. I have created a demonstration on JSFiddle for reference: http://jsfiddle.net/5s3Fr/

Answer №3

If you're working on coding for modern browsers or HTML5, it's worth exploring the <figure> and <figcaption> HTML tags.

Here's a helpful resource to consider: FIDDLE

Sample Markup:

<figure id="myFigure">
    <div id="myImg" class="dm_lp_imgs"></div>
    <figcaption>text under image</figcaption>
</figure>

CSS Styling:

.dm_lp_imgs {
    width: 100px;
    height: 115px;
}

#myFigure {
    float:left;
    margin-right: 15px;
    width: 100px;
}

#myImg { background: url('myimage.png') left top no-repeat; }

#myImg + figcaption {
    /* Style caption here */
    text-align:center;
    text-transform:capitalize;
}

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

What is the right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

htmlcssheightwidth

Differentiating the appearance of an HTML datalist with color alterations

Is there a way to customize the color of the datalist element (black box shown in the image)? https://i.stack.imgur.com/GGJQ3.png https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist EDIT: The default color is set by the system, although ...

htmlcss

Guide on transferring the td id value to a different page

document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...

javascriptphpjquerycssajax

Accessing and manipulating web elements using either XPath or CSS selectors

Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...

pythonhtmlcssseleniumxpath

How can I align rectangles with different heights to display side by side using Javascript?

Currently, I am designing a press page for a website where the headlines/articles are displayed in rectangles. To achieve this layout, I am using the following CSS: .press-blocks{ column-count: 4; column-gap: 2em; padding-left: 10%; padding ...

javascripthtmlcssformat

Change the element's color to match the default anchor link

Can CSS be utilized to match an element's color with the default <a> color? If affirmative, what is the method? ...

css

What are some tips for incorporating vue.js into a basic web application?

I've been trying to incorporate vue.js into my web application, but for some reason, it's not loading and the HTML is not firing in the browser. Please take a look at the code snippet below: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlcssvue.js

Adjustable div height: reduce until reaching a certain point and then begin expanding once more

Incorporating a hero section to display content is my current approach. The design adapts responsively utilizing the padding-bottom percentage strategy, along with an inner container that is absolutely positioned for central alignment of the content. The ...

javascriptjquerycssresponsive-design

Resizable icon next to inline element caused width adjustment

I have a group of individuals listed, each with two elements side by side: a "contact me" button (an 'a' element with a fontawesome icon) and a tag displaying the user type (span element). Some users do not have a tag, and when there is one prese ...

htmlcssinline

Why isn't this code for hiding the animation and displaying it not functioning properly?

Why isn't this animation from display none to block working properly? The initial code appears as follows, and it functions correctly: $(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100); When I add display: none; to the class ...

javascriptjquerycssanimation

Transform your ordinary HTML select into a stylish span with this custom CSS class

I need help making a select element appear like a span under certain conditions. The CSS class I currently have works with input boxes, but not with dropdowns. Is there any advice on how to style the select element to look like a span without actually repl ...

jquerycssdrop-down-menuhtml

Troubleshooting a mapping problem with CSS elements

While building my website, I have successfully mapped the elements by ID for all alphabet letters except A. When clicking on the letter A, it does not go to the respective elements. Can anyone please help me find a solution? Visit this link for reference ...

htmlcss

Center the text within the div and have it expand outwards from the middle if there is an abundance of text

I have a div that is in the shape of a square box and I want it to be centered. No matter how much text is inside, I would like it to remain in the middle. I am using JQuery to create my square box and would like to center it using CSS. Here is my code: &l ...

javascripthtmljquerycss

Buttons within the Bootstrap carousel caption cannot be clicked

I am currently designing a webpage with a Bootstrap carousel that includes a paragraph caption and two buttons. However, the buttons are not functioning as clickable links - when clicked, nothing happens. {% block body %} <div id ="car-container"> ...

javascripthtmljquerycsstwitter-bootstrap

Implementing both fancybox and a hover remove icon functionality on a single image

I came across a solution on this question here, outlining how to implement an overlay hover remove icon on thumbnails. I tried incorporating it into my page, along with fancybox, but unfortunately, I'm encountering issues getting both functionalities ...

jquerycssfancybox

React - CSS Transition resembling a flip of a book page

As I delve into more advanced topics in my journey of learning React and Front Web Dev, I discovered the ReactCSSTransitionGroup but learned that it is no longer maintained so we now use CSSTransitionGroup. I decided to create a small side project to expe ...

javascriptreactjscsscss-transitionsreactcsstransitiongroup

Tips for rotating and positioning an element in the top left or top right corner of a page

I recently tried rotating a div with text and wanted to position it at the top left corner. I was able to successfully align it at the top, but I'm having trouble getting it to align with the left edge. Any tips on how to achieve this? .credit { ...

htmlcsscss-transforms

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

How can you prevent a draggable element from surpassing the bottom of the screen?

I'm dealing with an element that I want to make draggable only along the Y-axis. It needs to be able to go past the top of the screen, but I need to restrict it from going past the bottom of the screen. I recently came across the containment feature i ...

javascriptjquerycsspluginsuser-interface

Leverage a single property from a CSS class within another CSS class

I am facing an issue where I need to utilize one property from a CSS class in another CSS class. .class_a {margin:10px; width: 360px; float: left; color:#ffffff; ...etc...} .class_b { use the margin property of .class_a } Only utilize the margin propert ...

css