picture positioned ahead of the text container

I am looking to add an image or icon in front of each label in my pricing table. I am considering using the :before pseudo element, but the most important thing is that the image maintains its proportions and stays within the height of the span. The height of the span is variable and depends on the parent element, which changes based on screen size.

There are three labels: "basic" with one image, "premium" with two images, and "ultimate" with three images. I want to replace the parentheses with the images for each label.

<span class="label">
  () BASIC
</span>
<span class="label">
  ()() PREMIUM
</span>
<span class="label">
  ()()() ULTIMATE
</span>

<br/><br/>
<img src="https://i.imgur.com/LS2fyR9.png"/>

.label{
  background-color:black;
  color:white;
  padding:10px;
  display:inline-block;
}

.label:before{
  content:""
}

https://jsfiddle.net/q3kngfs9/

Any assistance would be greatly appreciated!

htmlcss

Answer №1

I believe a solution similar to this could work well. Utilizing pseudo-classes can enhance the semantics of the code, however, positioning the image inline should suffice. It is recommended to specify width and height in the img tag.

<span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
<span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/>
  <img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
<span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/>
  <img src="https://i.imgur.com/LS2fyR9.png"/>
  <img src="https://i.imgur.com/LS2fyR9.png"/>ULTIMATE
</span>

.label{
  background-color:black;
  color:white;
  padding:10px;
  display:inline-block;
}
.label:before{
  content:""
}

img {
  width: 2rem;
}

Answer №2

The current responses are based on the assumption of text height dictating image width, resulting in the image not maintaining relative size as font size changes.

By using a relative font measurement, like 1em, for image height without setting its width, you can ensure proper width-to-height ratio that adjusts with text size.

#large {
  font-size: 36px
}

#medium {
  font-size: 24px
}

#small {
  font-size: 12px
}

.label {
  background-color: black;
  color: white;
  padding: .8em;
  display: inline-block;
}

.label:before {
  content: ""
}

.label img {
  display: inline-block;
  margin-right: .3em;
  vertical-align: middle;
  height: 1em;
}
<div id="large">
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>ULTIMATE
</span>
</div>

<div id="medium">
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>ULTIMATE
</span>
</div>

<div id="small">
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
  <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>ULTIMATE
</span>
</div>

Answer №3

Are you suggesting this approach? I have placed each image within a span element with only max-width specified.

HTML

 <span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/> BASIC
</span>
<span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>PREMIUM
</span>
<span class="label">
  <img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/><img src="https://i.imgur.com/LS2fyR9.png"/>ULTIMATE
</span>

CSS

.label{
  background-color:black;
  color:white;
  padding:10px;
  display:inline-block;
}
.label:before{
  content:""
}
.label img {
  display:inline-block;
  max-width:50px;
  margin-right:5px;
  vertical-align:middle;  
}

https://jsfiddle.net/MAXXALANDER/geqn2vLc/3/

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

Tips for shutting down the camera within a modal by utilizing Html5 QrCode Scanner in ASP.NET MVC

Hey there! I'm currently working with the Html5 QrCode library to implement a scanner, and I've integrated it into a modal. However, I'm facing an issue where the camera continues running even after I close the modal. I'm wondering if t ...

javascripthtmlasp.netasp.net-mvcqr-code

Place text directly below the images for proper alignment

In my current rails app, I am working on the contributors page. Each member's name should be displayed centered beneath their respective images. Any assistance with this would be greatly appreciated. Below is a snippet from my member.html.erb file ...

htmlcssruby-on-rails

How can jQuery determine the amount of line breaks within a div element?

My div wrap size is a percentage of the screen width, containing multiple .item divs that break into new lines as the window size decreases. I attempted to calculate the total number of boxes that could fit based on their widths compared to the container ...

javascriptjqueryhtmlcssweb

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

htmlcsstweets

The form continues to submit even if the validation process fails

I am facing an issue where my form still submits to the controller even if the validation fails. Here's my jQuery code: $(document).ready(function () { $('#commentForm').validate(); }); $(function () { $('#commentForm&ap ...

jqueryhtml

Refresh the data in a table upon clicking the menu

I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...

phphtmlcssajax

Tips for effectively using the parseInt function to access and verify a span element from inside a chrome extension

Trying to utilize parseInt to ascertain if a span element is greater than or equal to 1 within my Google Chrome Extension. Attempting to monitor this "0" for changes and trigger a specific URL upon change - Refer to the Image View of the "inspect" option ...

javascripthtmlgoogle-chromeparseint

Is it possible to swap images by clicking on them?

Let's say I'm working with 3 images. Image A, B and C. A is the main image initially. If I click on image B, it will become the main image and image A will take its place in the old position. The same condition applies when B is the main image a ...

javascriptjqueryhtmlangularimage

What do the different colored highlights in Sublime Text 2 indicate?

I am facing an issue with the code in a particular file: background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); Interestingly, Sublime Text 2 appears to highlight the background of indigo and violet with a light blue color: ...

csscolorsbackgroundsublimetext2highlight

What is the proper way to apply a backgroundImage to just one component?

Is there a way to set the backgroundImage on just one component in a React project? When I attach it to the body element, it shows as the backgroundImage for all components. However, if I assign it to the .wrapperContainer element of the current component, ...

reactjscssbackground-image

Angular <select><option> tags are missing from the browser display, although they are present in the source HTML code

After incorporating a dropdown list into the FormGroup, it seems to be missing from the browser display. Upon inspecting the page's HTML source on Chrome, I noticed that the <select><option></option></select> element is present ...

javascripthtmlangularangular-material

Using PHP to narrow down SQL results by date

When it comes to populating an HTML table with data from an SQL table using PHP, I have a specific method in place. Here's how I go about it: <table class="posts"> <?php $respost = mysqli_query($link,"SELECT * FROM table WHE ...

phphtmlmysqldatetime

How to prevent selection of certain days in an Angular date input

I need help with my Angular component that includes an input date field. I am trying to figure out how to disable all past dates and also a specific range of future dates, such as those between 2023-10-15 and 2023-10-23. Is there a way to achieve this func ...

htmlangulardateinputrange

Is it possible to identify when a key is pressed on any part of an HTML webpage?

I am currently seeking a solution to detect when a key is pressed on any part of an HTML page, and then showcase a popup displaying the specific key that was pressed. While I have come across examples of achieving this within a textfield, my goal is to m ...

htmlonkeypress

Arrange the header and input within a div using flexbox to achieve different alignments

I need help aligning the header section vertically and ensuring responsiveness. Using margin-top isn't fully responsive, so I want to align the header at the beginning of the input field.https://i.sstatic.net/w3xSP.jpg { margin: 0px; paddin ...

htmlcss

Explore the HTML elements in order to determine their respective position

In the midst of working on a chat app project, I've managed to create a code that aligns the chat bubbles to the left for users other than myself, and to the right for my own messages. While the code does function as intended for the first chat bubbl ...

javascripthtmlfor-loop

Having trouble with Socket.emit() and socket.on() not functioning properly?

I am currently developing a game using node.js and socket.io. I am attempting to send a variable to the client using socket.emit() and socket.on(). Despite my efforts, it doesn't seem to be working as expected and I'm unsure of what the issue mig ...

javascriptnode.jshtmlsocket.io

Tips for getting rid of the ghosting effect or white background of a PNG image

As a new developer, I am currently working on my personal chess project and have recently mastered the drag and drop system. However, I would like to explore different methods for achieving this. Is there a way to eliminate the white background in the proc ...

javascriptcssimagedragchess

What is the best way to connect a React application with a mailerlite.com signup form?

Looking to seamlessly incorporate an email signup form from Mailerlite.com into your website? Wondering how you can integrate this functionality with React? In particular, are you curious about the process of integrating the JavaScript code required for t ...

javascripthtmlreactjs

html text alignment in the center

Is there a way to align text in the center without shifting the starting position of the first letter? before text 1 text text text 2 text text after ...

htmlalignmentcenter