Using :before and :after in CSS, three dots can be created in a horizontal line

I am currently trying to display three horizontal dots on my webpage. I have created a demonstration on jsfiddle.

span {
    position: relative;
    background-color: blue;
    border-radius: 5px;
    font-size: 0;
    margin-left: 20px;
    padding: 5px;
}

span:before {
    position: absolute;
    left: -10px;
    content: '';
    background-color: green;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;
    padding: 5px;
}

span:after {
    position: absolute;
    right: 0;
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;
    padding: 5px;
}

I'm not sure if this method is the most effective way to achieve the desired result. Additionally, I would like these dots to be aligned horizontally but for some reason they are not lining up properly. Can anyone provide suggestions on how to rectify this issue?

htmlcss

Answer №1

If you are implementing absolute positioning, consider using the top property for vertical positioning of pseudo elements and adjusting the left property for horizontal alignment.

Take a look at this example

span:before {
    position: absolute;
    left: -20px; /* Adjusting circle alignment horizontally */
    top: 0;      /* New declaration added for vertical positioning */
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;
    padding: 5px;
}

span:after {
    position: absolute;
    left: 20px; /* Aligning circle horizontally */
    top: 0;     /* New declaration for vertical positioning */
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;    
    padding: 5px;
}

In this scenario, it's unnecessary to utilize the margin property for the pseudo-elements.

Moreover, consider avoiding negative values for the left property to ensure the circles are positioned correctly on the right. (See this example for clarification).

Answer №2

//changing from right to left in after

span {
    position: relative;
    background-color: blue;
    border-radius: 5px;
    font-size: 0;
    margin-left: 20px;
    padding: 5px;
}

span:before {
    position: absolute;
    left: -10px;
    content: '';
    top: 0;
    background-color: green;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;

    padding: 5px;
}

span:after {
    position: absolute;
    left: 10px; //changing from right to left
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;
    top: 0;

    padding: 5px;
}

Answer №3

Take a look at this jsFiddle example

Here is the HTML code snippet:

<span></span>

And here is the CSS styling for the "span" element:

span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; }

You can see how the span:before and span:after pseudo-elements are styled in the following CSS code:

span:before {
    position: absolute;
    left: -20px;
    top: 0;
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;
    padding: 5px;
}

span:after {
    position: absolute;
    left: 20px;
    top: 0;
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;    
    padding: 5px;
}

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

Data from the session is not displayed when a redirect occurs

On the main page, I include the following code: <?php $required = array('post_question'); // Checking if post field is not empty $error = false; foreach($required as $field) { if (empty($_POST[$field])) { $error = true; } } if(isset($_POST[&a ...

phphtmlsql

Ways to showcase the chosen image from the input field?

Can someone help me with an issue I'm having regarding displaying selected images? Every time I try, I encounter this error message: Not allowed to load local resource: Any suggestions or insights into why this might be happening? <input type=&a ...

javascripthtmljqueryimage

Tips for managing callbacks from a RESTful service API on IOS

Utilizing an API to enable users to register an account on my application. Currently, I have managed to craft the necessary URL in objective-C to submit the data, with the API documentation detailing the return codes that will indicate the outcome. My qu ...

htmlobjective-ciosapisubmit

CSS showcase of a minimalist image gallery

I have designed a simple image gallery using the following CSS: .product_container { width:100%; display:block; } .product_images { width:45%; display:inline-block; border:1px solid black; } .product_images .large { } .product_images ...

htmlcss

How can I implement a recursive nested template call in Angular 2?

Hopefully the title isn't too misleading, but here's my dilemma: I am in the process of building an Angular 2 app and utilizing nested templates in multiple instances. The problem I am facing involves "widgets" within my app that can contain oth ...

htmltemplatestypescriptangularangular-directive

Showcasing PHP variables within HTML using jQuery

I am currently looking for the best way to showcase information stored in a PHP variable, retrieved from a MySQL database. My initial thought was to use jQuery. Here are my questions: When a user inputs a number into a field, I receive that Member' ...

javascriptphpjqueryhtmlmysql

Looking for the optimal width ranges for media queries on laptops and cell phones?

Can anyone suggest the optimal width parameters to use in my code for different screen sizes, from tablets and laptops to cellphones, in order to create a responsive design? ...

htmlcssfixed-width

resizing videos in wordpress

Similar Question: How to Resize Embedded Videos Using PHP I am looking to adjust the dimensions of videos to be 280 pixels in height and 520 pixels in width on my WordPress homepage. Currently, the code is using the original YouTube dimensions: ...

phphtmlcsswordpressvideo

What is the best way to achieve this smooth scrolling animation on the page?

While browsing the website , I noticed a unique page scrolling effect that caught my eye. Unsure if they were using default bootstrap code or their own custom code, I was intrigued by how it worked. I attempted to find similar effects online but struggled ...

htmlvertical-scrolling

What could be causing my scrollable div to not function properly within a Bootstrap modal?

I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly. Here is an excerpt of ...

csstwitter-bootstraphtml

There are no elements displayed beneath the div

If you're short on time, let me explain my point with an image: Here is the HTML code I am working with: <div align="center"> <div class="img-container"> <div class="myconatiner"> <h2>Headline< ...

csshtml

Tips on building a blog using solely index.html, style.css, and script.js files

Looking for inspiration for blog listing pages? Check out some examples like: HubSpot's marketing blog or iGoMoon's blog. I'm trying to figure out where I should start. Should I begin with the first line of code? Or can I import sample code ...

javascripthtmlcssblogs

Guide on aligning text along a baseline

CLICK HERE TO ENTER THE INTERACTIVE PLAYGROUND HTML: <div class="first">Text A</div> <div class="second">Text B</div> CSS: div { background-color: rgba(255, 0, 0, 0.3); /* For visualization only */ margin-top: 50px; ...

htmlcss

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Currently, I am retrieving JSON data from an API and then displaying this data in an HTML table using plain JavaScript. My goal is to dynamically add a button at the end of each row for additional functionality, but so far, I have been unable to figure out ...

javascripthtmlhtml-table

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

I have a div on the left that displays a name, and it can vary in length. On the right, there is another div with buttons. The number of buttons may change, so I am unsure how many will be displayed. Is there a way to utilize only CSS to make sure the fi ...

htmlcssposition

"Layering text over images using background colors for a unique design touch

Is there a way to create a solid-color overlay that perfectly matches the size of an image using just HTML and CSS? I want to display text on this overlay, but it needs to work with images of any size. The image will be centered and resized to fit within ...

htmlcssimageoverlayfigure

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

javascripthtmlcssrshiny

The password does not conform to the pattern specified in Angular CLI

I am encountering an issue with password validation. I have implemented a regex pattern like this: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])' and configured my ng-form field as follows: password: ['', [Validators.pattern('(?=.*[a-z])(? ...

htmlregexangularpasswords

Class Background Imagery

Currently leveraging Wpbakery for my website design. Seeking to apply the FadeInUp animation solely to the background image rather than the entire row. Any suggestions on accomplishing this? Is there a method to assign a class solely to the background i ...

csswordpress

Transforming Text On Hover Using CSS, as well as Customizing the Style

I've been struggling with this issue for quite some time now. Despite scouring the first page of Google search results for "css change text on hover," I have not been able to find a solution. Inside a div, I have text that is styled and positioned us ...

htmlcss