Cara menggunakan changing text css

Well, as many said this is a hack. However, I'd like to add more up-to-date hack, which takes an advantage of flexbox and rem, i.e.

• You don't want to manually position this text to be changed, that's why you'd like to take an advantage of flexbox
• You don't want to use padding and/or margin to the text explicitly using px, which for different screen sizes on different devices and browsers might give different output

Here's the solution, in short flexbox makes sure that it's automatically positioned perfectly and rem is more standardized (and automated) alternative for pixels.

CodeSandbox with code below and output in a form of a screenshot, do please read a note below the code!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

Note: for different tags you might need different values of rem, this one has been justified for flexbox1 and only on large screens. However with flexbox2 you could easily extend this to mobile devices.

The w3-mobile class makes any bar elements responsive (horizontal on large screens and vertical on small).

Medium and large screens:

Example

Try It Yourself »

Colored Navigation Bars

Use a w3-color class to add a color to the navigation bar:

Example

Try It Yourself »

Bordered Navigation Bars

Use a w3-border or w3-card class to add borders around the navigation bar, or to display it as a card:

Example

Try It Yourself »

Active/Current Link

Add a w3-color class to a link to highlight it:

Example

Try It Yourself »

Hoverable Links

When you mouse over a button, the background color will change to grey.

If you want a different background color on hover, use any of the w3-hover-color classes:

Example

Try It Yourself »

If you want to change the text color instead, turn off the default hover effect with the w3-hover-none class, and add a w3-hover-text class.

Example

Try It Yourself »

Spend some time to play around with different hover effects:

Example

Try It Yourself »

Right-Aligned Links

Use the w3-right class on a list item to right-align a specific link:

Example

Try It Yourself »

Navigation Bar Size

Use a w3-size class to change the font-size of the links inside the navbar:

Example

Try It Yourself »

Use a w3-padding class to change the padding of each link inside the navbar:

Example

Try It Yourself »

Note: You can also add padding to the navigation bar, instead of each button. However, if you do this, note that the links do not get full padding on hover:

Customize the width of the links with the CSS width property

(Note: Use w3-mobile to transform the links to 100% width on small screens):

Example

Navigation Bar with Icons

Example

The "fa fa" classes in the example above display "Font Awesome" icons.

Learn more about how to display icons in the chapter W3.CSS Icons.

Navigation Bar Text

If you want text instead of buttons inside the navigation bar, use the w3-bar-item class to get the same padding as the buttons.

Example

 
 
 
 
  Text

Navbar with Inputs and Buttons

Example

Navigation Bar with Dropdown

Move the mouse over the "Dropdown" link:

Example

    Dropdown
   

Clickable Dropdown

Use w3-dropdown-click if you prefer to click on the dropdown link instead of hover:

Example

 
    Dropdown
 
 

Horizontal Dropdown Menu

Remove the w3-bar-block class from the dropdown container if you want the dropdown links to display horizontally instead of vertically:

Example

    Dropdown
   

Responsive Navbar with Responsive Dropdown

Use the w3-mobile class on all links including the dropdown container to create a responsive navbar with responsive dropdown links.

Resize the browser window to see the effect:

Example

    Dropdown
   

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a

element around the bar and add the w3-top or w3-bottom class:

Fixed Bottom

    ...
    ...
 

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Example

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack: