Aligned to the right, the ::before element stands out in the design

I have a button that already includes an ::after element below it, but I am looking to add a shape/element to the right side of the div.

a {
  position: relative;
  display: inline-block;
  padding: 15px 10px;
  margin: 0 5px;
  color: #222;
  font-size: 0.9em;
  font-weight: 700;
}

a:after {
  content: "";
  position: absolute;
  display: inline-block;
  background-color: #d11e5d;
  margin: 0 auto;
  height: 3px;
  width: 0;
  bottom: 6px;
  left: 0;
  right: 0;
}

a.btn-contact::before {
  background: #0c0;
  content: '';
  display: inline-block;
  float: left;
  height: 10px;
  width: 10px;
  position: absolute;
  right: 0;
  top: 0;
}
<a href="" class="btn-contact">button</a>

I managed to position it to the right of the link, but I want it to align vertically on the right side.

EDIT: Complete CSS/HTML provided. This is for a Wordpress site with the .btn-contact class applied to a specific button.

htmlcss

Answer №1

I have made some adjustments to the provided HTML code (assuming it aligns with your desired outcome).

Avoid using float for absolute elements as it will not have any impact.

Instead, utilize top:50% to align the element halfway with li a height (the element with relative positioning) and also add transform:translateY(-50%) to shift the :before element up by half of its height.

When combined, these two styles will vertically align the before pseudo-element in the middle.

Review the snippet provided below and confirm if it meets your requirements:

 li a {
   position: relative;
   display: inline-block;
   padding: 15px 10px;
   margin: 0 5px;
   color: #222;
   font-size: 0.9em;
   font-weight: 700;
 }
 
 li a:after {
   content: "";
   position: absolute;
   display: inline-block;
   background-color: #d11e5d;
   margin: 0 auto;
   height: 3px;
   width: 0;
   bottom: 6px;
   left: 0;
   right: 0;
 }
 
 li.btn-contact a::before {
   background: #0c0;
   content: '';
   display: inline-block;
   height: 10px;
   width: 10px;
   position: absolute;
   right: 0;
   top: 50%;
transform:translateY(-50%)
 }
<li class="btn-contact"><a href="">button</a></li>

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

The issue with anchor links not functioning correctly in Chrome's desktop browser has been identified

I am interested in utilizing the greenfair CSS template available at this link. However, I have encountered an issue where the anchor links in the navbar do not work properly in Chrome (they function correctly in Firefox and IE). How can I resolve this pro ...

javascriptjqueryhtmlcssgoogle-chrome

css boxShadow merger

Looking to create a sleek horizontal navigation bar using an unordered list with list items representing each element: To ensure the elements fit perfectly within the bar, I set the width of each at 25% and added a box-shadow for a border. Using a traditi ...

htmlcss

It's impossible to center text in Bootstrap 5

Creating a website for my school project has been challenging, especially when it comes to centering text. I have been struggling to position the text in the middle of the background picture despite trying various methods. Here is the HTML code: pastebin ...

htmlcssbootstrap-5

Dropbox menu within an extended webpage

I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...

javascriptjquerycssreactjsecmascript-6

Sliding multiple divs up and down with jQuery

Here is the code that I am working with: JavaScript: $(".Head").click(function () { if ($(".Body").is(":hidden")) { $(".Body").slideDown('fast'); } else { $(".Body").slideUp('fast'); } }); HTML: ...

javascriptjqueryhtml

"Discover the magic of jQuery: Unveiling the hidden div with one simple CSS visibility change

I want to implement a functionality on my screen where the Previous button is hidden initially and only becomes visible when the user clicks the Next button. I have set the CSS property for the Previous button to hide it by default, but despite using an if ...

javascriptjqueryhtmlcss

How can I dynamically populate a select menu in HTML without the need to submit any data

Looking for help with an input form in HTML that uses a combination of input and select boxes. My goal is to dynamically populate a select menu based on the data entered into the input boxes. For example: Employee One: Jim Employee Two: John Employee Thre ...

javascriptphphtml

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

javascriptjquerycsshtmlresponsive-design

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

javascriptphpjqueryhtmlcss

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascriptphphtmlgoogle-analytics

Having difficulty compiling Bootstrap css with grunt

After struggling for two days and finding numerous online tutorials, I still require assistance. My goal is to add a namespace to Bootstrap so that I can use it in Salesforce without conflicting with Salesforce's stylesheet. I plan on wrapping the boo ...

csstwitter-bootstrapgruntjsless

Concealing overflow in an SVG element with absolute positioning

Looking to hide the parts of the circle that extend beyond the shadowed container. Utilizing bootstrap-4 for this project. body { overflow: hidden; } .container { margin-top: 5%; width: 1200px; height: 625px; border-radius: 4px; background- ...

csssvgbootstrap-4

Guide to building a robust tab system using JQuery and Ajax

I am currently working on a mockup page where the accordion feature is functioning well. However, I am looking to implement a tab-like system that will allow users to navigate between different pages. Specifically, I want users to be able to click on page ...

jqueryhtmlajax

Activate month input programmatically

Having an issue trying to open a month popup using jQuery trigger. I have a button and an input of type month, but when the button is clicked, the popup does not open as expected. You can find the fiddle for this question here. $(document).ready(functio ...

jqueryhtml

Steps for encoding a CSV export with HTML:

When I retrieve data from a string that is HTML encoded as Quattrode® I end up with Quattrode® after viewing it in Excel 2007. Here is the routine: Response.Clear(); Response.Buffer = true; Response.ContentType = "text/ ...

c#htmlasp.netcsv

Tips for Concealing PHP Undefined Error Messages Using Echo

I'm new to PHP and I'm attempting to display user information in a div after submission using the echo function. Here is my current code snippet: <label class="input-fields" name="cust-name"> Name <input type="text" id="cust[name]" ...

phphtml

The horizontal scrollbar is not displaying

(RESOLVED) Currently, I am developing a movie app that displays film titles through an Accordion feature using Bootstrap. Specifically, I have created an Accordion that showcases movies added to a favorites list. The intention is for this favorites secti ...

htmlcssbootstrap-5

Styling with CSS: Proper alignment of elements within a div container

I'm struggling with positioning three elements within a div. The left element needs to be on the left, the middle element centered, and the right element on the right. Here's what I have so far in my CSS: #left-element { margin-left: 9px; ...

csspositioninghtml

Issue with setting a background image to a div in Next.js: not functioning as expected

I haven't used Next.js before and I'm having trouble setting a background image for a specific div. I have a folder named public in the root directory where I've placed the file art-thing.jpg. My styles.css is also in the root directory, whi ...

htmlcssjsxnext.js

How to Use jQuery to Detect Audio Position in HTML

Is it possible to use the HTML5 Audio tag with an eventListener or action using Dom/jQuery to trigger an event during playback or at the end? This answer mentions currentTime but lacks examples. Pseudo code provided below. <!DOCTYPE html> <html& ...

javascriptjqueryhtmldomaudio