javascript: obtain the height of the pseudo :before element

Can someone help me figure out how to get the height of a pseudo :before element? I've tried using jQuery but it's not working as expected. Here's what I attempted:

$('.test:before').height() // --> null

If you want to take a look, here's a link to my jsfiddle. Any ideas on what I might be doing wrong?

UPDATE: The height of .test changes based on the content inside. My goal is to add padding to the right of the element when its height exceeds that of the pseudo element. However, since the height of the pseudo element is set by CSS, I'm struggling to access it in my program.

javascripthtmlcss

Answer №1

Apologies for the delayed response, but here's a tip: you can utilize vanilla JavaScript to access pseudo-element dimensions by using the getComputedStyle method:

var testBox = document.querySelector('.test');

// Alternatively with jQuery: testBox = $('.test').get(0); - We're aiming for the raw JS element, not wrapped in jQuery

var pseudoBeforeHeight = window.getComputedStyle(testBox, ':before').height; // Outputs (string) "70px"

This will provide a text representation of the height value, irrespective of how it's defined in CSS (e.g. 4.375rem = 70px, 10vh = 70px, calc(8vh + 1rem) = 70px). To extract the numerical value (in pixels), you can simply convert it like so:

var pseudoHeightNum = parseInt(pseudoBeforeHeight);

In terms of browser compatibility: according to CanIUse as of July 2017, this method is widely supported across modern browsers (including IE9 and above): reference.

Answer №2

In the words of Paulie_D, "Remember, pseudo elements are not accessible via jQuery".

Nevertheless, if your website elements are styled similarly to those in the JSFiddle example, then the div will ultimately match the height of the :before element, from which you can retrieve the value:

$('.test').height()

If this is not the case, please explain why you need to obtain the height, as there might be an alternative solution available.

Answer №3

To tackle this issue, consider the layout of your design. If the pseudo element extends beyond the parent element, using scrollWith/scrollHeight will provide you with the dimensions of the pseudo element as these properties indicate the total size of the box's content, whether visible or not.

For more information, check out these references:

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

Adding the object's key to an array in JavaScript: A step-by-step guide

Among the objects in my possession are: robot { id skill currentWorkPlace } warehouse { aiStaff currentStatus boxes } I am tasked with creating a function that will add the id of a new worker to the aiStaff array and assign a reference to the ...

javascriptarraysobject

Trouble encountered in PHP: Generating a file from POST data and initiating download prompt for the user not functioning as intended

On my webpage, users fill out forms and input fields, which are then sent to a PHP page via Ajax and $_POST. The PHP file successfully writes the output to a txt file. However, I'm facing an issue trying to prompt the user to download the file on the ...

javascriptphpajax

The browser is displaying the raw text data of a file rather than the formatted HTML content

As a newbie in the world of webpage development, I am currently working on my very first webpage project. I have written some HTML code using a text editor and saved it as an HTML file. However, when I try to view it in my browser, all I see is plain HTML ...

html

Unending React cycles - invoking setState() within a render onClick

Recently delving into React and facing an issue with rendering a button component. My goal is to create a button that, upon being clicked, fetches data and displays it as a list below the button. To achieve this, I am attempting conditional rendering. I ut ...

javascriptreactjscomponentsrenderreact-lifecycle

I'm attempting to solve the retrieved data from a firebase query, but unfortunately, the data is refusing to resolve

I've been attempting to retrieve data from firebase using Node.js, but I'm having trouble resolving it. Specifically, I need to extract the timestamp from the data stored in firebase. I've tried using promises and forEach loops, but haven&a ...

javascriptnode.jsexpressfirebase-realtime-databasepromise

Applying the CSS property overflow-x: hidden will prevent horizontal overflow and only display

When I set overflow-x: hidden on an element that overflows both horizontally and vertically, it displays a vertical scroll bar along with hiding the horizontal overflow. I attempted adding overflow-y: visible and just overflow: visible, but it had no effec ...

htmlcss

The function for the "load next page" action in ngInfiniteScroll is continuously triggered

After attempting to implement infinite scrolling using the "loading remote data" example from the ngInfiniteScroll website, I am facing a problem. The function nextPage() is being called continuously until all records have been loaded (controlled by an of ...

javascriptangularjsnginfinitescroll

What is the process for transferring an object to a different file?

Currently, I am working on a web application using Node.js. In my project, I have two main files. The first one is Server.js, where I handle server actions such as going online. The second file contains a large object filled with data. I successfully impo ...

javascriptnode.js

Ensure that two elements containing content of varying width are equal in width

I am facing a challenge with a container that contains two child elements (previous and next links). These links have labels of different lengths, but I need them both to have the same width on the page. Ideally, each link should be as wide as the widest e ...

htmlcss

Highlighted Navigation Options

When visiting , take note of the top navigation bar. The background color on this page is white, but as you navigate to other pages, the tab changes to a different color. How can you modify this behavior and change the class? Is PHP or jQuery necessary f ...

htmlcss

Delete multiple selected rows from the table

I need help with removing multiple rows from a table. I've tried the code below but it doesn't seem to work. I'm using DataTables v1.10.9. $('#del_Btn').on('click', function () { // 'table' is the instanc ...

javascriptjquerydatatables

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

Struggling to create a Bootstrap 5 page and facing challenges with vertically aligning text in divs? Here's the code snippet causing problems: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

htmlcssbootstrap-5

The "Boostrap Confirmation" plugin in JQuery fails to appear upon the second click

After changing the confirmation method from an MVC Action to an Ajax method, I noticed that the confirmation box does not appear when clicking a second time. It seems to have stopped working possibly because the page is no longer being refreshed. How can ...

javascriptc#jqueryajaxtwitter-bootstrap

Angular Datepicker MinDate function prevents selection of dates "behind" by one

I've encountered an issue with the Angular Bootstrap Datepicker where I'm setting the min-date attribute as follows: <input type="text" class="" uib-datepicker-popup="MM/dd/yyyy" show-button-bar="false" ng-model="vm.date" ng-change= ...

javascriptangularjsdatepickerangular-ui-bootstrap

With the latest Facebook Graph API integration, we are encountering issues where AJAX calls are returning empty values

Exploring the latest Facebook Graph API and experimenting with fetching data using jQuery Ajax. Below is a snippet of my simple JavaScript code: var apiUrl = 'https://graph.facebook.com/19292868552'; $.ajax({ url: apiUrl, data ...

javascriptfacebookjquery

Incorporate and interpret a custom JSON object within my Shopify Liquid theme

In an attempt to integrate custom data into my Shopify liquid theme, I stored a JSON file in the assets folder. My goal is to retrieve and parse this JSON object within a jQuery method from a JavaScript file also located in the assets folder. Despite try ...

javascriptjqueryjsonshopifyliquid

The chaotic world of Android WebKit versions 2.x and 3.x

I have been working on an Android app and my goal is to make it compatible with Android versions 2.2 and above. Currently, due to issues with the WebView control, I am restricted to targeting Android 4.0 and higher. The app primarily uses HTML, CSS, Java ...

javascriptandroidjqueryhtmlcss

Effective technique for connecting client-side JavaScript with server-side node.js

I am striving to create a compact website featuring field auto-completion, drawing suggestions from the server's database (utilizing Node.js + MySQL). What approaches can I take to establish client-server communication as the user inputs data into a ...

javascriptnode.js

What is causing the auto-fill property in CSS Grid to malfunction when used in a vertical column direction?

I've been experimenting with the auto-fill property in grid rows, but it's not quite working as I intended. My goal is to create rows with a height of minmax(140px, 200px), however, what I'm actually getting is one row at 200px height and th ...

htmlcssvertical-alignmentcss-grid

Is it achievable to employ the object "angular" while still implementing the 'use strict' directive?

Whenever I use gulp-jshint, it requires me to include the 'use strict' directive in every file. This causes an issue with my global object emApp, defined in my app.js file as: var emApp = angular.module('emApp'); Interestingly, jshint ...

javascriptangularjsgulpjshint