How to put number on the left and percentage and word 'Off' stack on the right

Tran Duy

I would like to do a text 20% off but number on the left and percentage and off stack on the right. Can you guy give me an idea? Image to Reference

sajee

You can try with this.

.discount-number-wrapper {
  padding: 0 30px 0 0;
  font-size: 48px;
  position: relative;
  display: inline-block;
  line-height: 1;
}

.discount-number-wrapper:before {
  content: '%';
  font-size: 30px;
  position: absolute;
  top: 2px;
  right: 0;
}

.discount-number-wrapper:after {
  content: 'OFF';
  font-size: 13px;
  position: absolute;
  bottom: 5px;
  right: 0;
}
<div class="discount-number-wrapper">
  20
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to put a div at left or right in pure CSS?

From Dev

how to display a number/word at a percentage chance?

From Dev

jquery animate left percentage off

From Dev

How to move cursor left or right by word in Windows?

From Dev

iOS 7 added slide to the right to pop a view controller off the stack. Is it possible to add it back by sliding left?

From Dev

How do I stack elements inside a div on both left and right?

From Dev

How to make tables stack, right over left, in responsive email?

From Dev

Highcharts bar with negative stack: how to show different tooltip for left and right

From Dev

How can I put numbers In a column from left to right?

From Dev

How to change Layout of Quasar App and put the left Drawer to the right?

From Dev

Bootstrap 3 - How can I put the left and right borders of the image?

From Dev

how to put 2 divs left and right on one crousal?

From Dev

Stack Float the TextView in Left and Right

From Dev

How to get number of digits in both right, left sides of a decimal number

From Dev

How can text be justified on both the left and right sides of a line in Word?

From Dev

How to make right-to-left footnotes in Microsoft Word

From Dev

random number from list based off percentage

From Dev

How to number sections of a circle going from left to right

From Dev

How to have two sets of shortcut keys for Compiz grid commands "Put Left" and "Put Right"?

From Dev

How to nudge a positioned tip associated with an image to the right if it would extend off the left-hand side?

From Dev

Xml: trying to put timeline on left with subject on right

From Dev

Delete part of word right/left to the cursor in vim

From Dev

Adding spaces to the left and right of a word in a SELECT statement

From Dev

Find the operator in string and get left and right word

From Dev

How can I put image file on the left side and texts on the right side

From Dev

CSS <p> width on percentage online shrinks on window resize (left - right)

From Dev

Autolayout Percentage-based Placement in Right-to-left Language

From Dev

left div percentage width, right fills remaining space

From Dev

Css issue bars to move left to right on percentage bassis

Related Related

  1. 1

    How to put a div at left or right in pure CSS?

  2. 2

    how to display a number/word at a percentage chance?

  3. 3

    jquery animate left percentage off

  4. 4

    How to move cursor left or right by word in Windows?

  5. 5

    iOS 7 added slide to the right to pop a view controller off the stack. Is it possible to add it back by sliding left?

  6. 6

    How do I stack elements inside a div on both left and right?

  7. 7

    How to make tables stack, right over left, in responsive email?

  8. 8

    Highcharts bar with negative stack: how to show different tooltip for left and right

  9. 9

    How can I put numbers In a column from left to right?

  10. 10

    How to change Layout of Quasar App and put the left Drawer to the right?

  11. 11

    Bootstrap 3 - How can I put the left and right borders of the image?

  12. 12

    how to put 2 divs left and right on one crousal?

  13. 13

    Stack Float the TextView in Left and Right

  14. 14

    How to get number of digits in both right, left sides of a decimal number

  15. 15

    How can text be justified on both the left and right sides of a line in Word?

  16. 16

    How to make right-to-left footnotes in Microsoft Word

  17. 17

    random number from list based off percentage

  18. 18

    How to number sections of a circle going from left to right

  19. 19

    How to have two sets of shortcut keys for Compiz grid commands "Put Left" and "Put Right"?

  20. 20

    How to nudge a positioned tip associated with an image to the right if it would extend off the left-hand side?

  21. 21

    Xml: trying to put timeline on left with subject on right

  22. 22

    Delete part of word right/left to the cursor in vim

  23. 23

    Adding spaces to the left and right of a word in a SELECT statement

  24. 24

    Find the operator in string and get left and right word

  25. 25

    How can I put image file on the left side and texts on the right side

  26. 26

    CSS <p> width on percentage online shrinks on window resize (left - right)

  27. 27

    Autolayout Percentage-based Placement in Right-to-left Language

  28. 28

    left div percentage width, right fills remaining space

  29. 29

    Css issue bars to move left to right on percentage bassis

HotTag

Archive