Is there a way to align the arrow on the pills to the right center of the lengthy text?

I am struggling to align a pill on the right side of a header with long text using CSS. I need the pill to be centered at the right area with multiple lines of text. Can someone guide me on how to achieve this? Any assistance is appreciated.

.c-cta-box-link{
  text-decoration-color: #ffffff;
}

a{
  color: #000;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.c-cta-box-header {
    padding: 1px 15px 8px;
    background-color: #bbce00;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
.c-cta-box-headline {
    margin-bottom: 0;
    padding-right: 20px;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-text-decoration-color: #fff;
    text-decoration-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    }
    
    .c-cta-box-content {
    height: calc(100% - 40px);
    padding: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    }
    
    .c-cta-box-link:after {
    content: "";
    position: absolute;
    top: 10%;
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}
<a title="Download som PDF her" href="/-/media/wakeup/pdf/organisationsdiagram-dk-01-07-2017.pdf?la=da&amp;hash=69E3519ABB423F7EA21E655A18F2C7BCAA84A4E5" target="Aktiv browser" class="c-cta-box-link">
<div class="c-cta-box-header">
  <h2 class="c-cta-box-headline">Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF  </h2>
</div> 
<div class="c-cta-box-content"></div>
</a>

htmlcssbootstrap-4nav-pills

Answer №1

This snippet aims to align the arrow centrally. Update your CSS properties with the following instructions:

a {
   position: relative;
   display: block;
   color: #000;
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
}
.c-cta-box-link:after {
   content: "";
   position: absolute;
   top: 50%;
   margin-top: -3px;
   right: 7%;
   width: 0;
   height: 0;
   border-top: 6px solid transparent;
   border-right: none;
   border-bottom: 6px solid transparent;
   border-left: 6px solid #fff;
   margin: 0;
   white-space: nowrap;
}

Please note that the arrow alignment may not appear centralized immediately due to the presence of the empty c-cta-box-content div affecting the relative positioning of the a tag.

Answer №2

By incorporating the top property as follows: calc(50% - 20px), I was able to effortlessly solve the issue at hand. This particular feature, known as Calc, offers the convenience of executing mathematical operations directly within your CSS. One of its standout qualities is the ability to combine different units. For instance, you can utilize a percentage unit while simultaneously subtracting a fixed pixel size from that percentage.

.c-cta-box-link:after {
    content: "";
    position: absolute;
    top: calc(50% - 12px);
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}

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

Utilize PHP's IF/ELSE statements to showcase the outcome

In my problem, I have a sample code. What I aim to achieve is to notify the user if there is no data that matches the input they provided, specifically when searching for "Helloworld". I am considering using an if-else statement for validation to determine ...

phphtmlmysql

ngif directive does not function properly when subscribe is utilized in ngOnInit

this is the unique component code import { Component, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; //import { Item } from '../item/item.model'; import { CartItem } from './cart-item.model'; imp ...

htmlangulartypescript

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

javascripthtmljsonaws-lambdaaws-api-gateway

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

javascriptjquerycssjquery-collision

Using Selenium in Java to extract text from an h1 tag

Although I am familiar with the method .getAttribute("innerHTML") for retrieving the value of a h1 tag, my HTML structure is a bit different: https://i.sstatic.net/RVaMM.png While I am able to locate the h1 tag, I am facing difficulty in accessing its inn ...

javahtmlseleniumtesting

Issue with displaying Facebook meta image when sharing

Having trouble displaying a custom Facebook image on the share button. I am testing from localhost, could that be the issue (unable to test in production yet)? The image address is sourced from the web and I have tried various options. <meta property=" ...

htmlimagefacebookhttpmeta

expanding the input and duplicating the outcomes

I'm attempting to clone and add values to results in my project. Here's the link to what I have so far: http://jsfiddle.net/QNP3r/175/ Currently, it is functioning adequately with a table element. However, I'd like to make it work with a di ...

javascriptjqueryhtmlappend

Creating a cookie on click event to change the background

I am working on changing the background of a div onclick and storing it with a cookie. However, I am facing some issues with my code. I can't determine if the cookie has been properly set, and I am unsure about changing the background with the value o ...

javascriptjquerycsscookiesbackground

Issue with onClick function causing failure to generate options in select menu

function getOption(){ var select = document.getElementById("dynamic-select"); if(select.options.length > 0) { var option = select.options[select.selectedIndex]; alert("Text: " + option.text + "\nValue: " + option.value); ...

javascriptjqueryhtmlcssbootstrap-4

Exploring the capabilities of HTML5 canvas and integrating it with Selenium using Python

I have been working on testing a web server that is built using HTML5 with a canvas. While examining the source code for the login page, I noticed very minimal content. However, upon inspecting the element in Chrome, I discovered the following snippet: &l ...

pythonhtmlseleniumcanvas

Alter the class of a div when a key is pressed

Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...

jqueryhtml

New messages are revealed as the chat box scrolls down

Whenever a user opens the chatbox or types a message, I want the scroll bar to automatically move down to show the most recent messages. I came across a solution that seems like it will do the trick: The issue is that despite implementing the provided cod ...

javascripthtmlcss

Picking an item for alignment at the center with flexbox styling

What was the reason for specifying .footer-background to have a display: flex property in order to center the .copyright-text? Why did setting display: flex on .footer not achieve the desired result? .footer-background { background-color: #00008B; ...

htmlcssflexbox

Animated dropdown feature spanning the entire width of the screen

I successfully developed a basic dropdown menu with full-width sub-menu functionality. Check it out on jsFiddle: $(document).ready(function(){ $(".drop").hide(); $(".link-1").mouseenter(function(){ $('.link-1-drop').slide ...

javascriptjqueryhtmlcssdrop-down-menu

Tips for incorporating additional filter criteria into a jquery script

I am currently utilizing a jQuery script to filter data based on date periods. However, I now need to include an additional filtering criteria for the "POSITION" column. Since I lack expertise in jQuery, I would rather accomplish this using plain vanilla J ...

javascripthtml

Guide to adjusting the camera rotation in Three.js

I successfully created a 3D cone using CSS3Renderer and TrackballControl. You can see it in action here: Now, I am looking to enhance the user experience by allowing them to input values to control the camera rotation instead of relying on TrackballContro ...

css3dthree.jsuser-input

What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses. .img-loader{ text-align: center; width: 50px; display: block; ma ...

htmlcss

What is the best way to set the exact pixel width for a sidebarPanel?

Is there a way to define the precise width of a sidebarPanel in pixels instead of using the width argument? I have found that the width option is not precise enough for my needs. library(shiny) ui <- fluidPage( sidebarLayout( sidebarPanel(widt ...

cssrshiny

Unable to remove the initial item from my shopping cart

Currently working on my computing science assignment and decided to create an online store. I followed a tutorial to implement the shopping cart functionality, but I'm facing an issue. I can delete every item in the cart except for the first one that ...

phphtmlmysqliproject

What is the best way to display these images correctly within a slider?

My goal is to display 4 images/company logos per slide, but they all end up clustered on one slide. Despite my efforts to adjust the CSS, nothing seems to work. This is what my code currently renders: https://i.sstatic.net/ThaOK.png Here are the react co ...

javascripthtmlcssreactjscodesandbox