[ANSWERED] html – Change title look with CSS

Question 1

You can use a CSS hack to acheive this if you really want to use CSS only. First, make the text disappear by setting it to the color of the background. Then use the before and after selectors to rerender the content.

However, easier would be to use span tags in your HTML, then make each of them have display: block to get a line break.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

:root {
  --font_size: 20px;
  --text_col: grey;
  --text_margin: 10px;
}

.title {
  border-top: 2px solid grey;
  font-size: var(--font_size);
  color: white;
}

.title:before {
   content: "Düsseldorf";
   color: var(--text_col);
   position: absolute;
   left: 10px;
   top: var(--text_margin);
}

.title:after {
   content: "markets";
   color: var(--text_col);
   position: absolute;
   left: 10px;
   top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
   <div class="title">Düsseldorf markets</div>
</body>
</html>

Question 2

You can use padding-right with calculation. padding-right: calc(100% - 10ch); This is very simple, no complex.

.title {
  border-top: 2px solid grey;
  color: grey;
  font-size: 20px;
  padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
  box-sizing: border-box;
}

<div class="title">Düsseldorf markets</div>

Question 3

A simple way to approach this – use a width property on a element. Then, by word-break rule (which is ‘normal’ by default and you don’t need to specify this) words will be auto-wrap on next line, when there is no free place on container

here is demo

P.S. And you have a typo – did you mean font-size except for text-size?

Question 4

I have an issue creating a title for a web page.
Here is title:

<!DOCTYPE html>
<html>
<head>
<style>

.title {
  border-top: 2px solid grey;
  color: grey;
  text-size:20px;
}
</style>
</head>
<body>
   <div class="title">Düsseldorf markets</div>
</body>
</html>

I need to move the market word to the bottom and it should be displayed like that:

Düsseldorf 
markets

Any idea how can I do it with the help of CSS only(i.e how can I change title CSS class to get desired view)?

Bollate

[ANSWERED] html – Change title look with CSS

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by Michael

Comment posted by itsanewabstract

Comment posted by Michael

Comment posted by itsanewabstract

Comment posted by Michael

Comment posted by doğukan

Comment posted by Michael

Comment posted by Temani Afif

Comment posted by doğukan

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate