Expanding SVGs with TailwindCSS

As I work on designing a landing page using TailwindCSS, I’m looking to add a decorative element under my headlines. To accomplish this, I decided to create an SVG and utilize the after pseudo-element to position it accordingly. Here’s a snippet of my code showcasing how I implemented this:

<span after:h-5 after:bg-[url('../public/svg/underline-large.svg')] after:bg-no-repeat />

The challenge I encountered with this approach is that I have to use different lengths of SVGs for varying headline sizes. Ideally, I would like to find a way to stretch one SVG to match the width of any given title. Any suggestions on how to achieve this?

https://i.sstatic.net/yyiyO.png

htmlcsssvgtailwind-css

Answer №1

You should consider incorporating additional options and utilizing a relative class, but the crucial step is to include the 

preserveAspectRatio="none"
attribute in the svg.

HTML
<h1
  class="text-2xl
  relative 
  after:content-['']
  after:h-[1rem]
  after:w-full
  after:absolute
  after:bottom-[-1.2rem]
  after:left-[0]
  after:bg-[url('./underline.svg')]
  after:bg-no-repeat"
>
  Short Title
</h1>
SVG
<svg preserveAspectRatio="none" viewBox="0 0 63 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M5.47663 1.41505C21.2121 3.69552 49.2623 6.09008 61.691 1.41505C52.455 5.86203 35.6249 8.49799 1.14368 4.49373" stroke="#2AADD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

https://codesandbox.io/s/stretching-svgs-in-tailwindcss-o4g0tf?file=/index.html

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

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

javascriptjqueryhtmldynamic

The z-index is not functioning correctly when outside of the container

Using bootstrap, I am attempting to display an element outside of the container. [html] <div class="container"> <div class="element"></div> </div> [css] .element{ position:absolute; right:0; top:0; z-index:999;} Issue: The blo ...

cssbootstrap-4

Tips for reliably resizing slider images with varying widths

I am trying to scale '.slick-slide img' by height because the images vary in width. Scaling them by width would result in inconsistent proportions. However, when I apply a dimension to the height property for '.slick-slide img', the ima ...

htmlcss

Emphasize the designated drop zone in Dragula

Incorporating the Dragula package into my Angular 2 project has greatly enhanced the drag-and-drop functionality. Bundling this feature has been a seamless experience. Visit the ng2-dragula GitHub page for more information. Although the drag-and-drop fun ...

javascriptcssangularng2-dragula

Can a button be validated if it is located outside of a form?

I'm currently in the process of developing a website to practice my coding skills and I have a query. Can I implement button validation when the button is not within a form using HTML, CSS, and Bootstrap? Check out the following code snippet: & ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

How to use jQuery to change the background color of HTML table cells based on their content value

A dynamic table will be displayed based on the dropdown element selected. Below is a snippet of the code: <table id="myPlaneTable" class="table table-bordered"> <tr> <td style="width: 20%">Max speed</td> <td ...

javascriptjqueryhtmlbootstrap-4

The v-menu closes before the v-list-item onclick event is detected

I have set up the following menu using vue and vuetify: <div id="app"> <v-app id="inspire"> <div class="text-center"> <v-menu> <template v-slot:activator="{ on }"> ...

javascripthtmlvue.jsvuetify.js

Display a Datagrid table featuring numerous column headers across multiple pages using asp.net

Unable to provide more details on the title, please refer to the links below. Using DataGrid (not GridView) in ASP.net with VB code. Current display in my datagrid: view picture1 here, I want it to be like this view picture2 here The goal is to split my ...

cssasp.netvb.netgoogle-chromedatagrid

Enhance Your Images: Creating Stunning Colored Overlay Effects using HTML and CSS

I'm currently working on implementing an overlay effect for images on a webpage. The idea is that when the cursor hovers over an image, it will change color slightly. However, I'm facing some issues and the desired effect is not reflecting. How c ...

htmlcssoverlay

How to target the nested elements within a canvas using CSS

Can someone help me figure out why I am unable to style this canvas element? It seems like the CSS is not recognizing it because it is generated dynamically. Even using 'copy selection' does not seem to work. #drawing > div > div > canv ...

htmlcss

Obtaining an HTML horizontal scroll bar

When using bootstrap and the row class, I am encountering a horizontal scroll bar. <div class="row" style="margin-top: 10px; margin-right: 10px;"> <div class="card col-md-3" style="max-height:fit-content; ba ...

htmlcss

Creating a clean layout with Bootstrap 4: Utilizing white space in the navbar and various sections

After encountering several issues on my website, I attempted to resolve them. While some problems were successfully solved, others remained unsolved. Frustrated by multiple failures, I decided to seek help by posting this question. Problem 1: A blank spac ...

htmlcsstwitter-bootstrap

Creating HTML code that is optimized for mobile devices

My front end design is based on the CSS stylesheet from W3Schools.com, which includes a class property called "w3-rightbar" for adding a thick right border. However, I encountered an issue where I needed to hide this "w3-rightbar" specifically on mobile vi ...

htmlcssw3-css

Incorporating a calendar icon within an input field: Step-by-step instructions

Could anyone help me figure out how to insert a Font Awesome icon into the textbox within daterangepicker? Right now, all I see is this: https://i.sstatic.net/7LLmj.png However, I want it to look like this: https://i.sstatic.net/2UyjH.png Here's my ...

cssbootstrap-4daterangepicker

Text that adjusts its size based on the available space between columns within a row

I am currently developing an application using angular and bootstrap, and I have a requirement to insert a link between two columns in the third row of iteration. Here is what I have attempted so far: Html: <div class="container"> <div clas ...

cssangulartwitter-bootstrapbootstrap-4

Why are my video files exhibiting inconsistent behavior?

I've encountered an issue with the code on my website where I'm trying to display a 40-second video. The video converter I used seems to have added extra video types, which may be causing the problem. Here's what the HTML code looks like: ...

csshtmlvideoautoplay

Decorative initials have a tendency to create spaces within the text

I have incorporated Google Fonts into my website, along with Bootstrap. Here is the code I am using: .initial { font-size: 1.5em; font-family: 'Euphoria Script', cursive; } p { font-family: 'Open Sans', sans-serif; } <html> ...

htmlcss

Place the footer element at the bottom of the page in relation to its preceding sibling

Having an element positioned at the bottom of a page can sometimes be tricky, especially when there are elements that slide up and down based on user interactions. On pages with enough content to push the element down naturally, everything works fine. The ...

jquerycss

With Laravel's Ajax search feature, the entire collection is returned as the response to the query once the input is removed from the input box

After clearing the input fields for the search feature, I expect the response to show no results. However, it is displaying the full collection instead of nothing. The functionality works correctly when there is input, but once the input is cleared, the en ...

phphtmlajaxlaravel

Receive the most current PHP information within JavaScript

I am attempting to update the content of a div on my HTML page every time a button labeled refresh is clicked. The goal is to invoke a JavaScript function when the user clicks the button, and this function should refresh the contents of the div with data r ...

javascriptphphtml