Tips for adjusting the font size of the :before element using only CSS dynamically

I am looking to adjust the size of the before pseudo-element based on the font-size of the element it is attached to.

Using TinyMCE v4, I have included a style format like so:

style_formats: [
    {
      title: 'Custom Bullet',
      selector: 'ul', 
      classes: 'custom_bullet'
    },
]

The custom style added with this format is:

.custom_bullet li:before{
    content: "\e013";
    font-family: 'Glyphicons Halflings';
    float: left;
    color: #F00;
}

My goal is for the custom marker in a list item to automatically adjust when the font-size of the list item changes, preferably without using JavaScript.

If you have any suggestions on how to achieve this dynamically with CSS, please let me know.

Answer №1

It's unclear if I grasp your point, but have you considered this:

.custom_bullet li, .custom_bullet li:before {
    font-size: 1em;
}

Answer №2

Avoid using quotes for the font-family

font-family: Glyphicons Halflings;
.custom_bullet li:before{
    content: "\e013";
    font-family: Glyphicons Halflings;
    float: left;
    color: #F00;
}

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

Incorrect Date Range Picker Alignment

I am having trouble with the positioning of a mat date-range-picker calendar inside a component. I have a menu component that calls another component called leave, which contains the mat date range picker calendar. The problem is that when I call the leav ...

Error Message: ASP.NET Razor Pages JavaScript file throws an undefined error

Trying to transition a website from Wordpress to ASP.NET Razor Pages and encountering some issues. After downloading files from the original site, including an 'assets' folder, a 'lib' folder (containing fonts, css, and js), and index. ...

Create a dynamic dropbox using JavaScript/JQuery in an HTML page

I am currently working on implementing 3 different drop down boxes that are triggered by 4 different buttons. These drop down boxes should appear within the #apple div. When Button B1 is clicked, the drop down options include Apple, Mango, and Papaya. Whe ...

What is the best way to reposition the origin of the canvas to the center?

As a beginner in html and JavaScript, I am currently working on a program that involves points and lines in a coordinate system. However, the canvas for html5 has its origin at the upper corner, and I need to create a coordinate system with the origin at ...

Utilizing jPlayer to play music files uploaded using Paperclip in a Ruby on Rails application with the help of jQuery

Just wanted to say thanks in advance for any help. Currently, I am storing songs in a filesystem using Paperclip and attempting to play them with jPlayer. Despite following all the necessary steps, I am unable to get the audio to play when clicking on a ...

Scrapy specializes in crawling, not just scraping

I've been working on a Python and Scrapy project on a website, but I keep encountering this error: DEBUG: Crawled (200) <GET http://careers.kfc.com.au/apply/?postcode=2000> (referer: None) I can't figure out why it's happening. The ...

The <body> tag is not located at the top of the webpage

Recently, I've come across an interesting issue on my website. The scrollTo() method in jQuery seems to be working fine in Firefox, but it doesn't scroll to the top in Chrome. I suspect that the placement of the <body> tag might be causing ...

CSS background color using over 20 different shades

I am seeking a way to dynamically change the background color of an object based on a specific value. Specifically, I want to create a percentage bar with 100 different background colors possible, corresponding to each percent (excluding when empty). The w ...

Link to toggle a CSS spoiler button

Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that c ...

Disable the justification of Angular UI Tabs on mobile devices

When using the Angular UI Tabs component with the attribute justified="true", everything works fine on desktop. However, I am facing an issue when the resolution changes for tablets and phones, as I want to change justified to false. I prefer not to rely ...

Achieving uniform card heights with .d-flex and .flex-fill styling

After following the solution provided here: How to make Bootstrap 4 cards the same height in card-columns? I successfully achieved uniform height and width for some cards nested within another card. However, in a different scenario, the heights of the ca ...

Unexpected behavior with animation duration in Safari

We have a project in the works that involves CSS animation. Our goal is to update the animation duration using JavaScript. Although this change is effective in most browsers, it seems to have trouble with Safari and iOS. Below is the code we are using to ...

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Currently, I am in the process of converting a piece of code from jQuery to plain JavaScript and CSS. The specific code snippet I am focusing on involves creating easing functions without relying on jQuery. const customEasing = { easeInExpo: function ( ...

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

Creating plugin-based applications using HTML5

I am new to developing web applications and want to create an HTML5 cross-platform application that resembles the startup page of Windows 8, displaying multiple windows for users to choose from. I need guidance on how to start this project. I would like ...

The script fails to function on elements contained within an infinite scrolling feature

I am facing an issue with my code after implementing infinite scroll. The like script seems to be broken as the page gets refreshed when I try to like a post. Here is the Like-btn script: <script> $(document).ready(function(){ ...

The toggler in Bootstrap 5's Navbar menu is experiencing difficulties opening on mobile browsers

Just arrived here for the first time. Encountering an issue with my Bootstrap 5.1 Navbar menu. Background info: My website is hosted locally via Xampp with php pages for forms and cookies. Everything functions perfectly on desktop. Checked responsiveness o ...

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

I'm currently working on customizing the color palette for my project, but I am only able to modify the main attribute and not others. My development environment is JavaScript with MUI, not Typescript. import './App.css'; import {BrowserRout ...

Issue with displaying Font Awesome icons in Bootstrap 4 navbar brand

Recently, I've been setting up a local Laravel website to explore the latest features and changes in Laravel 5.6. However, I've encountered an issue while trying to integrate a Font Awesome icon into the navbar-brand of Bootstrap 4. The icon does ...

Tips for creating a textarea element that resembles regular text format

I am working on creating an HTML list that allows users to edit items directly on the page and navigate through them using familiar keystrokes and features found in word processing applications. I envision something similar to the functionality of To achi ...