Create a stylish CSS arrowline underneath a text string

The CSS property text-decoration-line allows for underlines and overlines to decorate a text string. However, I am looking to take it a step further by having an underline with an arrow pointing either left or right. It seems that using text-decoration-line alone cannot achieve this.

My desired text decoration looks like this:

  THIS-IS-A-CHALLENGE-TIME                            
            -------->

The arrowed underline should be in conjunction with specific words. In the example above, I want to underline the word CHALLENGE with an arrow pointing to the right. Any assistance on how to achieve this would be greatly appreciated.

csscascadeunderline

Answer №1

Consider using border-bottom: 2px solid black; instead of text-decoration for underlining text, and utilize :after to create an arrowhead.

.arrow {
  position: relative;
  border-bottom: 2px solid black;
  padding-bottom: 4px;
}

.arrow:after {
    position: absolute;
    margin-left: -6px;
    content: ">";
    bottom: -9px;
}
THIS-IS-A-<span class="arrow">CHALLENGE</span>-TIME

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

Sass encountered an issue when trying to import using the "~" symbol from the node_modules directory

I am currently developing a single-page web application using Angular 6, and I recently integrated the ngx-toast library into my project. However, I encountered an issue when trying to load the libraries by adding the following Sass code with the "~" symb ...

cssangularsass

Troubleshooting the Missing Border Issue in Tailwind Form Fieldset [Code Snippet Included]

I am developing a basic react application with the help of Tailwind css. Scenario 1: Functioning correctly without tailwind: https://codesandbox.io/s/bold-agnesi-y70ue In this example, the tailwind library is not utilized. The simple react app displays ...

htmlcssreactjstailwind-cssfieldset

Is there a way to create a layout with three columns of divs, where the middle column is shifted, that automatically collapses into two columns with the second one shifted when the window size is reduced?

For the about page of my website, I have a grid layout consisting of three columns. The challenge is to offset the center column by 50%. When the window size is reduced beyond a certain point, I want the third column to disappear and its images to be distr ...

htmlcssbootstrap-5grid-layout

A guide on using jQuery to include an icon within a select option

I'm having trouble adding an icon to a select dropdown using jQuery. I attempted to include the icon within the option itself, but it displays as empty boxes. Additionally, I want the selected option's icon to appear above without the accompanyin ...

javascripthtmljquerycssselect

Troubleshooting problems with the height of nested DIV elements

Issue I am attempting to replicate the layout depicted in the image below. The black area represents the body with id="library", the grey div is id="body" (which is not visible due to lack of margins for inner divs), the light blue div is id="sideBar", th ...

csshtml

Creating a Authentic Screw Top Appearance with CSS

I am striving to create a realistic screw head. Here is what I have done so far: <div class="screw"><div class="indent"></div></div> .screw { position: absolute; top: 10px; left: 49%; width: 30px; height: 30px ...

javascriptjquerycsshtml

How to Customize Shadow-DOM Elements in Audio Player on Webkit and Chrome

Context: In my quest to enhance the appearance of the audio element in Chrome, specifically version 89 on MacOS, I encountered two perplexing issues that I am seeking a deeper understanding of. By utilizing pseudo selectors, I was able to successfully styl ...

htmlcssgoogle-chromeshadow-dom

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

javascriptjqueryhtmlcss

Add CSS styling to the button element when the form is not valid

HTML <div class="filterButt"> <input type="hidden" name="reportParams"> <span class="pull-right"> <button type="submit" ng-disabled="!filter.$valid" ng-click='filterComponents()' data-toggle="modal" id=" ...

cssangularjs

How to prevent npm from being accessed through the command prompt

I recently began working on a ReactJs project. However, I am facing an issue where after starting npm in Command Prompt, I am unable to enter any text. Should I close the cmd window or is there a way to stop npm? You can now access your project at the fol ...

javascriptcssreactjsnpmcmd

Issue with the for loop functionality in a less CSS mixin

After observing that a section of Less that I believed was functioning correctly is not producing all the styles I require, I realized that my for loop is not functioning properly. The specific less code snippet in question is: .for(@list, @code) { & ...

cssnpmgruntjsless

What is the best way to ensure the current tab remains unchanged when updating a page?

I have a unique horizontal tab system displayed as follows: <a id="default" class="link" href="#">Tab 1</a> <a class="link" href="#">Tab 2</a> <a class="link" href="#">Tab 3</a> This tab system is created using basic H ...

phphtmlcss

"Compatibility issues discovered with Bootstrap Affix across various browsers including IE, Chrome, and MS Edge

Recently, I encountered an issue while developing a new website in Firefox. After a few days, I realized that Bootstrap affix was not working properly in Chrome, IE, and Edge. I am using the latest versions of Bootstrap, Firefox, and Chrome, but I am unsur ...

javascripthtmltwitter-bootstrapcss

jQuery In-Place Bounce Effect

I'm looking for a solution to make my list item elements bounce in place without overlapping. Check out the JSFiddle I created to illustrate my issue: http://jsfiddle.net/RGvjj/ If anyone can provide guidance on why this is happening and how to fix ...

jqueryhtmlcssinlinebounce

Stick your navbar to the top with Bootstrap 4

I have a bootstrap 4.1 navbar set up and I'm trying to ensure that my div "#pin_to_top" always stays at the top of the navbar. This way, on wider screens, it will be displayed as: Logo - Menu - "#pin_to_top" (all in one row) And on smaller devices, ...

htmlcssbootstrap-4

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row. Here is an example: <div> <table> < ...

javascriptcssreactjsstyled-components

Managing the vertical dimensions of a div

I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically ...

htmlcssangular

Ways to ensure the menu remains fixed on a fluid website

Is there a way to prevent the main-menu from moving to a second line when resizing the page down, while still maintaining fluidity? Thank you, Ken ...

css

Tips for positioning two divs side by side in block formation

I'm attempting to display two distinct div elements as blocks, one for the name and the other for the names. Here is the Fiddle The names block should be displayed as a separate block next to the name div, regardless of screen responsiveness. How ca ...

htmltwitter-bootstrapcss

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

I am facing an issue where my website switches to mobile design at 850px, but the button I have on both desktop and mobile mode gets hidden under the header banner when it transitions to mobile design. I want to adjust the main body content of the website ...

htmlcssmedia-queries