Hover Effect in the Text

/* Write [.focus] above your text to add the hover effect to this section */

.focus p {
    line-height: 1.8;
    transition: all 0.3s ease;
    position: relative;
}

.focus p:hover {
    transform: translateX(10px);
    padding-left: 20px;
    border-left: 3px solid black;
}

How to integrate CSS-Styles in adoc Studio

  1. Create a new product style (recommended)

  • Duplicate an existing product style

  • Integrate the new CSS code into the duplicated stylesheet

This variant ensures a consistent appearance and simplifies subsequent changes, as all documents use the same centrally maintained style.

  1. Project-specific stylesheet

  • Create a styles.css file in the project.

  • Above the document title of each AsciiDoc document concerned, write the line

:stylesheet: styles.css

Learn more in our CSS documentation in the user manual.

Color Gradient for Headings

Previous