---
title: "How to Use the Style Content With the Hover Card in Elementor?"
url: https://theplusaddons.com/docs/use-style-content-with-hover-card-in-elementor/
date: 2023-07-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "Style rows add your own CSS to a layout built with the Hover Card widget, for example to style the classes you gave its rows. The Style content type of..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Use-the-Style-Content-With-the-Hover-Card-in-Elementor_-1024x536.jpg
word_count: 476
---

# How to Use the Style Content With the Hover Card in Elementor?

## 

- Utilize the Hover Card widget from The Plus Addons for Elementor to implement custom CSS for layout design.
- Add items to the Hover Card widget by clicking the +ADD ITEM button and selecting None for opening and closing tags.
- Insert custom CSS code in the Custom Style field after selecting Style from the Content dropdown in the Hover Card settings.

Style rows add your own CSS to a layout built with the Hover Card widget, for example to style the classes you gave its rows.

The **Style** content type of the **Hover Card** widget in The Plus Addons for Elementor prints that CSS in a style tag. Read the limitation below first: the CSS is only printed for administrators.

*To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, [click here](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/hover-card/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — Hover Card is part of the free The Plus Addons for Elementor plugin. It works the same with the Pro plugin installed.- **Widget to enable:** Hover Card, switched on under **The Plus Addons > Widgets**.- **Deprecated:** the editor shows “The Hover Card widget has been deprecated since The Plus Addons for Elementor 6.5.0. Note that Hover Card will be completely removed once The Plus Addons for Elementor 6.6.0 is released.” No replacement widget is named, so avoid it for new pages.- **Skills:** you build the HTML structure yourself, row by row, so basic HTML and CSS knowledge helps.

## How to Add Style Content

- Add the **Hover Card** widget and click **+ Add Item** in **Content > Hover Card**.- Set **Open Tag** and **Close Tag** to **None**. The style tag is added for you.- Set **Content** to **Style** and write the CSS, without a style tag, in **Custom Style**. Target the classes you set in **Enter Class** on other rows.

![A Hover Card row with Content set to Style and CSS for the hc-accent class in the Custom Style field](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-content-style.webp)

This CSS adds an orange underline to the title row, which has the class **hc-accent**:

`.hc-accent {
letter-spacing: .5px;
border-bottom: 3px solid #F59E0B;
display: inline-block;
}`

![Product card with an orange underline under the title, as a logged-in administrator sees it](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-style-admin.webp)

## How It Behaves

- The widget does not limit your selectors to the widget, so use specific class names.- A closing style tag typed inside Custom Style is neutralised, so it cannot end the style block early.

## Limitations

- **The CSS is only printed for logged-in administrators.** Logged-out visitors and users with other roles, such as subscribers, do not get it, so the page looks different for them.- Elementor caches widget output by default (Elementor > Settings > Performance > **Element Cache**, 1 Day). If an administrator views the page first, visitors get the CSS until the cache expires; if a visitor is first, nobody gets it, administrators included. Set the widget’s **Advanced > Cache Settings** to **Inactive** to render it fresh for each viewer.- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.

## Troubleshooting

### The CSS works when I am logged in but not in a private window

That is the administrator-only limitation. Put the CSS somewhere every visitor receives it instead.

## Related Docs

- [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/)- [Use Script content with the Hover Card](https://theplusaddons.com/docs/use-script-content-with-hover-card-in-elementor/)- [Create a custom layout with the Hover Card](https://theplusaddons.com/docs/create-custom-layout-with-hover-card-in-elementor/)