#arrow :: after с корейскими символами

Question

Приветствия и приветствия. В настоящее время я разрабатываю CSS для выбора языка, в то время как мой партнер работает над частью сценария. У меня возникла небольшая проблема, с которой я надеялся получить помощь.

Существует 8 языков, с которыми мы работаем: Deutsch, Engli sh, Español, Français, Italiano, 한국어, Português, и 中文 Языки, которые используют латинские символы, кажется, работают отлично и прекрасно, однако, восточные языки хотят работать сверху вниз и перекрывают логин .

Я хотел бы, чтобы они работали слева и оставайтесь в правильной коробке, как другие языки . Обратите внимание, что имена языков в этом случае являются псевдоэлементом :: after стрелки #.

    var langclass = "en";
    $( document ).ready(function() {
        console.log("ready");
        $('#lang-select').change(function(){
            document.getElementById("flags").className = $("#lang-select").val();
        });
    });
const langSelect = $("#lang-select");
$(document).ready(function() {
	console.log("ready");
  let focused = false;
  let updateArrow = function() {
	  console.log("update");
    $("#flags").toggleClass("active", focused);
	document.getElementById("arrow").innerHTML = focused ? "⮙" : "⮛";
  };
  langSelect.click(function(ev) {
    if (ev.target !== langSelect[0]) return;
    focused = !focused;
	console.log("select");
    updateArrow();
  });

  let onDeselect = function() {
	  console.log("deselect");
    if (!focused) return;
    focused = false;
    updateArrow();
  };
  langSelect.focusout(function() {
    onDeselect();
  });
  langSelect.change(function() {
    onDeselect();
  });
  langSelect.find("option").click(function() {
    onDeselect();
  })
});

/*background color to test white text*/
body {
  background-color: black
}
/*The actual CSS*/
#arrow {
  position: absolute;
  right: 4vw;
}
.language-picker {
  text-align: right
}
.language-picker label {
  font-size: 1.5vw;
    line-height: 1.8;
  color: white;
	height: 2.5vw;
	width: 15vw;
  z-index: 1;  
  position: absolute;
  right: 9%;
}
.language-picker option {
  background-color: #111925
}
.language-picker:hover label {
  opacity: 1
}
.language-picker label #flags {
  display: inline-block;
  width: 2.5vw;
  z-index: 1;
  position: absolute;
  right: 0;
}
#lang-select {
    opacity: 0;
	height: 2.75vw;
  width: 50%;
  z-index: 2;
  position: relative;
    right: 5%;
}
#arrow::after {
  margin-left: 1vw
}

.de #arrow::after {
  content: "Deutsch"
}
.en #arrow::after {
  content: "English"
}
.es #arrow::after{
  content: "Español"
}
.fr #arrow::after {
  content: "Français"
}
.it #arrow::after {
  content: "Italiano"
}
.ko #arrow::after {
  content: "한국어"
}
.pt #arrow::after {
  content: "Português"
}
.zh #arrow::after {
  content: "中文"
}
.de #british-flag, .de #bandera-española, .de #drapeau-français, .de #bandiera-italiana, .de #hangug-guggi, .de #bandeira-portuguesa, .de #zhōngguó-guóqí, .en #deutsche-flagge, .en #bandera-española, .en #drapeau-français, .en #bandiera-italiana, .en #hangug-guggi, .en #bandeira-portuguesa, .en #zhōngguó-guóqí, .es #deutsche-flagge, .es #british-flag, .es #drapeau-français, .es #bandiera-italiana, .es #hangug-guggi, .es #bandeira-portuguesa, .es #zhōngguó-guóqí, .fr #deutsche-flagge, .fr #british-flag, .fr #bandera-española, .fr #bandiera-italiana, .fr #hangug-guggi, .fr #bandeira-portuguesa, .fr #zhōngguó-guóqí, .it #deutsche-flagge, .it #british-flag, .it #bandera-española, .it #drapeau-français, .it #hangug-guggi, .it #bandeira-portuguesa, .it #zhōngguó-guóqí, .ko #deutsche-flagge, .ko #british-flag, .ko #bandera-española, .ko #drapeau-français, .ko #bandiera-italiana, .ko #bandeira-portuguesa, .ko #zhōngguó-guóqí, .pt #deutsche-flagge, .pt #british-flag, .pt #bandera-española, .pt #drapeau-français, .pt #bandiera-italiana, .pt #hangug-guggi, .pt #zhōngguó-guóqí, .zh #deutsche-flagge, .zh #british-flag, .zh #bandera-española, .zh #drapeau-français, .zh #bandiera-italiana, .zh #hangug-guggi, .zh #bandeira-portuguesa {
	display: none
}
.de #deutsche-flagge, .en #british-flag, .es #bandera-española, .fr #drapeau-français, .it #bandiera-italiana, .ko #hangug-guggi, .pt #bandeira-portuguesa, .zh #zhōngguó-guóqí {
	border: 1px solid white;
  border-radius: 50%;
	height: 2.5vw;
	width: 2.5vw;
  display: block;
  overflow: hidden;
  float: right;
  z-index: 2;
  position: relative;
}
.de #flags::before {
  content: "DEUTSHCHE";
  font-size: 2vw;
  color: gray;
  background-color: black;
	height: 2.5vw;
	width: 5vw;
  display: block;
  position: fixed;
  right: 12vw;
}
.de #deutch1, .de #deutch2, .de #deutch3, .es #española1, .es #española2, .es #española3 {
	height: 33.4%;
  width: 100%;
  position: absolute;
}
.fr #français1, .fr #français2, .fr #français3, .it #italiana1, .it #italiana2, .it #italiana3 {
	height: 100%;
  width: 33.4%;
  position: absolute;
}
.de #deutch1 {
  background-color: black
}
.de #deutch2 {
	background-color: red;
  top: 33.3%;
}
.de #deutch3 {
	background-color: yellow;
  bottom: 0;
}
.en #british-flag {
	background-color: #00257d
}
.en #diagonal-white-1, .en #diagonal-white-2, .en #horizontal-white {
	background-color: #fff;
  width: 100%;
  position: absolute;
}
.en #diagonal-white-1, .en #diagonal-white-2 {
    height: 15%;
    top: 43%;
}
.en #diagonal-white-1 {
	transform: rotate(30deg);
  z-index: 3;
}
.en #diagonal-white-2 {
	transform: rotate(-30deg);
  z-index: 5;
}
.en #red-tl, .en #red-br, .en #red-bl, .en #red-tr {
	background-color: #ff0000;
	height: 25%;
  width: 50%;
  position: absolute;
}
.en #red-tl, .en #red-bl {
  z-index: 4;
  top: 25%;
}
.en #red-br, .en #red-tr {
  z-index: 6;
  top: 50%;
  right: 0;
}
.en #horizontal-white {
	height: 25%;
	z-index: 7;
  top: 37.5%;
}
.en #vertical-white {
	background-color: #fff;
  height: 100%;
	width: 25%;
	z-index: 8;
  position: absolute;
  left: 37.5%;
}
.en #horizontal-red, .en #vertical-red {
	background-color: #ff0000;
  position: absolute;
}
.en #horizontal-red {
	height: 15%;
  width: 100%;
  z-index: 9;
  top: 42.5%;
}
.en #vertical-red {
	height: 100%;
  width: 15%;
  z-index: 10;
  left: 42.5%;
}
.es #española1 {
	background-color: red
}
.es #española2 {
	background-color: yellow;
  top: 33.3%;
}
.es #española3 {
	background-color: red;
  bottom: 0;
}
.fr #français1 {
	background-color: blue
}
.fr #français2, .it #italiana2 {
	background-color: white;
  left: 33.3%;
}
.fr #français3, .it #italiana3 {
	background-color: red;
  right: 0;
}
.it #italiana1 {
	background-color: green
}
.ko #hangug-guggi {
	background-color: white
}
.ko #yinyang, .ko #yin, .ko #yang, .ko #hangug1, .ko #hangug2, .ko #hangug3, .ko #hangug4 {
	position: absolute
}
.ko #yinyang {
	background: linear-gradient(to bottom, #c40e2f 0%, #c40e2f 50%, #000000 50%, #003478 50%, #003478 100%);
  border-radius: 50%;
	height: 50%;
  width: 50%;
  z-index: 3;
  top: 25%;
  left: 25%;
}
.ko #yin, .ko #yang {
  border-radius: 50%;
  height: 50%;
  width: 50%;
  z-index: 4;
  top: 25%;
}
.ko #yin {
	background: #c40e2f
}
.ko #yang {
	background: #003478;
	right: 0;
}
.ko #hangug1, .ko #hangug2, .ko #hangug3, .ko #hangug4 {
	height: 10%;
  width: 20%;
}
.ko #hangug1 {
	transform: rotate(-45deg);
	top: 21%;
  left: 9%;
}
.ko #hangug2 {
	transform: rotate(45deg);
	top: 21%;
  right: 9%;
}
.ko #hangug3 {
	transform: rotate(45deg);
  bottom: 21%;
	left: 9%;
}
.ko #hangug4 {
	transform: rotate(-45deg);
  right: 9%;
	bottom: 21%;
}
.ko .fullstripe, .ko .halfstripe {
  height: 25%;
  width: 100%;
  margin-bottom: 6.25%;
}
.ko .fullstripe {
	background: #000
}
.ko .halfstripe {
	background: linear-gradient(to right, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%)
}
.pt #bandeira-portuguesa {
	background: linear-gradient(to right, #006600 0%, #006600 35%, #FF0000 35%, #FF0000 100%);
}
.pt #bandeira-portuguesa img {
	height: 50%;
  width: 50%;
  position: absolute;
  top: 25%;
  left: 10%;
}
.zh #zhōngguó-guóqí {
	background-color: red
}
.zh #big-star, .zh .little-star {
  color: yellow;
  position: absolute;
}
.zh #big-star {
	font-size: 1vw;
  top: 10%;
  left: 15%;
}
.zh .little-star {
	font-size: .3125vw
}
.zh #star1 {
	transform: rotate(20deg);
	top: 12%;
	left: 52%;
}
.zh #star2 {
	transform: rotate(55deg);
	top: 25%;
	left: 60%;
}
.zh #star3 {
	transform: rotate(5deg);
	top: 39%;
	left: 60%;
}
.zh #star4 {
	transform: rotate(25deg);
	top: 52%;
	left: 52%;
}

    <!DOCTYPE html>
    <html>
        <head>
    <!--jquery-->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <!--JS that changes the flag-->
            <script src="#lang-select.js" type="text/javascript"></script>
        </head>
        <body>
            <div class="language-picker js-language-picker">
                <select name="lang-select" id="lang-select">
                    <option value="de">Deutsch</option>
                    <option value="en">English</option>
                    <option value="es">Español</option>
                    <option value="fr">Français</option>
                    <option value="it">Italiano</option>
                    <option selected="" value="ko">한국어</option>
                    <option value="pt">Português</option>
                    <option value="zh">中文</option>
                </select>
        	    <label>
                    <div id="flags" class="ko">
                        <div id="arrow">⮛</div>
                        <div id="deutsche-flagge">
                            <div id="deutch1"></div>
                            <div id="deutch2"></div>
                            <div id="deutch3"></div>
                        </div>
                        <div id="british-flag">
                             <div id="diagonal-white-1">
                                 <div id="red-tl"></div>
                                 <div id="red-br"></div>
                            </div>
                            <div id="diagonal-white-2">
                                 <div id="red-bl"></div>
                                 <div id="red-tr"></div>
                            </div>
                            <div id=horizontal-white></div>
                            <div id=vertical-white></div>
                            <div id=horizontal-red></div>
                            <div id=vertical-red></div>
                        </div>
                        <div id="bandera-española">
                            <div id="española1"></div>
                            <div id="española2"></div>
                            <div id="española3"></div>
                        </div>
                        <div id="drapeau-français">
                            <div id="français1"></div>
                            <div id="français2"></div>
                            <div id="français3"></div>
                        </div>
                        <div id="bandiera-italiana">
                            <div id="italiana1"></div>
                            <div id="italiana2"></div>
                            <div id="italiana3"></div>
                        </div>
                        <div id="hangug-guggi">
                            <div id="yinyang">
                                <div id="yin"></div>
                                <div id="yang"></div>
                            </div>
                            <div id="hangug1">
                                <div class="fullstripe"></div>
                                <div class="fullstripe"></div>
                                <div class="fullstripe"></div>
                            </div>
                            <div id="hangug2">
                                <div class="fullstripe"></div>
                                <div class="halfstripe"></div>
                                <div class="fullstripe"></div>
                            </div>
                            <div id="hangug3">
                                <div class="halfstripe"></div>
                                <div class="fullstripe"></div>
                                <div class="halfstripe"></div>
                            </div>
                            <div id="hangug4">
                                <div class="halfstripe"></div>
                                <div class="halfstripe"></div>
                                <div class="halfstripe"></div>
                            </div>
                        </div>
                        <div id="bandeira-portuguesa">
                              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Coat_of_arms_of_Portugal_%28Lesser%29.svg/300px-Coat_of_arms_of_Portugal_%28Lesser%29.svg.png" alt="">
                        </div>
                        <div id="zhōngguó-guóqí">
                            <div id="big-star">★</div>
                            <div id="star1" class="little-star">★</div>
                            <div id="star2" class="little-star">★</div>
                            <div id="star3" class="little-star">★</div>
                            <div id="star4" class="little-star">★</div>
                        </div>
                    </div>
                </label>
            </div>
        </body>
    </html>

Answer 1

Так что я бросил на это кучу вещей, пока ждал, и что-то, казалось, прилипло, так что теперь это работает. Я собираюсь немного покопаться и посмотреть, что именно, а потом я отредактирую это, чтобы люди знали. Потому что здесь я ничего не видел по теме.

edit: я указал высоту. Точнее, той же высоты, что и его основной элемент. Поэтому, если вы хотите добавить чужой символ в псевдоэлемент :: after, не забудьте указать следующее:

CONTENT, чтобы элемент отображался.

FONT-SIZE, если еще не указано.

HEIGHT , чтобы восточные символы оставались в своем ящике. Добавление высоты к основному элементу будет недостаточно. Это должно быть на псевдоэлементе.

WIDTH, потому что это поле.

COLOR, чтобы вы могли видеть текст. (необязательно)

ЦВЕТ ФОНА во время поиска неисправностей, чтобы вы могли найти элемент. (необязательно)

Надеюсь, это поможет кому-нибудь однажды.

langclass = "en";
$( document ).ready(function() {
	console.log("ready");
	$('#lang-select').change(function(){
		document.getElementById("flags").className = $("#lang-select").val();
	});
});
$('#flags').attr('data-text', '⮛');
$( document ).ready(function() {
    console.log("ready");
    $( 'div' ).selectmenu({
        open: function( event, ui ) {
        $('#flags').attr('data-text', '⮙');
    }
        });
    
    $( 'div' ).selectmenu({
        close: function( event, ui ) {  
     $('#flags').attr('data-text', '⮛');
    }
    });
});

/*just so you can see the white text*/
body {
  background-color: black;
}
.language-picker label {
  opacity: .9
}
/*The actual CSS*/
.language-picker {
  text-align: right
}
#lang-select {
  opacity: 0;
	height: 2.75vw;
  width: 50%;
  z-index: 2;
  position: relative;
    right: 5%;
}
.language-picker option {
  background-color: #111925
}
.language-picker:hover label {
  opacity: 1
}
.language-picker label {
  display: inline-block;
  width: 2.5vw;
  z-index: 1;
  position: absolute;
  right: 9%;
}
#flags {
	height: 2.5vw;
	width: 15vw;
  float: right;
  position: absolute;
  right: 0;
}
#flags::before {
  font-size: 1.5vw;
    line-height: 1.8;
  color: white;
	height: 2.5vw;
	width: 15vw;
  position: absolute;
  right: 4vw; 
}

.de#flags::before {
  content: "⮛ Deutsch"
}
.en#flags::before {
  content: "⮛ English"
}
.es#flags::before{
  content: "⮛ Español"
}
.fr#flags::before {
  content: "⮛ Français"
}
.it#flags::before {
  content: "⮛ Italiano"
}
.ko#flags::before {
  content: "⮛ 한국어"
}
.pt#flags::before {
  content: "⮛ Português"
}
.zh#flags::before {
  content: "⮛ 中文"
}
.de #british-flag, .de #bandera-española, .de #drapeau-français, .de #bandiera-italiana, .de #hangug-guggi, .de #bandeira-portuguesa, .de #zhōngguó-guóqí, .en #deutsche-flagge, .en #bandera-española, .en #drapeau-français, .en #bandiera-italiana, .en #hangug-guggi, .en #bandeira-portuguesa, .en #zhōngguó-guóqí, .es #deutsche-flagge, .es #british-flag, .es #drapeau-français, .es #bandiera-italiana, .es #hangug-guggi, .es #bandeira-portuguesa, .es #zhōngguó-guóqí, .fr #deutsche-flagge, .fr #british-flag, .fr #bandera-española, .fr #bandiera-italiana, .fr #hangug-guggi, .fr #bandeira-portuguesa, .fr #zhōngguó-guóqí, .it #deutsche-flagge, .it #british-flag, .it #bandera-española, .it #drapeau-français, .it #hangug-guggi, .it #bandeira-portuguesa, .it #zhōngguó-guóqí, .ko #deutsche-flagge, .ko #british-flag, .ko #bandera-española, .ko #drapeau-français, .ko #bandiera-italiana, .ko #bandeira-portuguesa, .ko #zhōngguó-guóqí, .pt #deutsche-flagge, .pt #british-flag, .pt #bandera-española, .pt #drapeau-français, .pt #bandiera-italiana, .pt #hangug-guggi, .pt #zhōngguó-guóqí, .zh #deutsche-flagge, .zh #british-flag, .zh #bandera-española, .zh #drapeau-français, .zh #bandiera-italiana, .zh #hangug-guggi, .zh #bandeira-portuguesa {
	display: none
}
.de #deutsche-flagge, .en #british-flag, .es #bandera-española, .fr #drapeau-français, .it #bandiera-italiana, .ko #hangug-guggi, .pt #bandeira-portuguesa, .zh #zhōngguó-guóqí {
	border: 1px solid white;
  border-radius: 50%;
	height: 2.5vw;
	width: 2.5vw;
  display: block;
  overflow: hidden;
  float: right;
  z-index: 2;
  position: relative;
}
.de #flags::before {
  content: "DEUTSHCHE";
  font-size: 2vw;
  color: gray;
  background-color: black;
	height: 2.5vw;
	width: 5vw;
  display: block;
  position: fixed;
  right: 12vw;
}
.de #deutch1, .de #deutch2, .de #deutch3, .es #española1, .es #española2, .es #española3 {
	height: 33.4%;
  width: 100%;
  position: absolute;
}
.fr #français1, .fr #français2, .fr #français3, .it #italiana1, .it #italiana2, .it #italiana3 {
	height: 100%;
  width: 33.4%;
  position: absolute;
}
.de #deutch1 {
  background-color: black
}
.de #deutch2 {
	background-color: red;
  top: 33.3%;
}
.de #deutch3 {
	background-color: yellow;
  bottom: 0;
}
.en #british-flag {
	background-color: #00257d
}
.en #diagonal-white-1, .en #diagonal-white-2, .en #horizontal-white {
	background-color: #fff;
  width: 100%;
  position: absolute;
}
.en #diagonal-white-1, .en #diagonal-white-2 {
    height: 15%;
    top: 43%;
}
.en #diagonal-white-1 {
	transform: rotate(30deg);
  z-index: 3;
}
.en #diagonal-white-2 {
	transform: rotate(-30deg);
  z-index: 5;
}
.en #red-tl, .en #red-br, .en #red-bl, .en #red-tr {
	background-color: #ff0000;
	height: 25%;
  width: 50%;
  position: absolute;
}
.en #red-tl, .en #red-bl {
  z-index: 4;
  top: 25%;
}
.en #red-br, .en #red-tr {
  z-index: 6;
  top: 50%;
  right: 0;
}
.en #horizontal-white {
	height: 25%;
	z-index: 7;
  top: 37.5%;
}
.en #vertical-white {
	background-color: #fff;
  height: 100%;
	width: 25%;
	z-index: 8;
  position: absolute;
  left: 37.5%;
}
.en #horizontal-red, .en #vertical-red {
	background-color: #ff0000;
  position: absolute;
}
.en #horizontal-red {
	height: 15%;
  width: 100%;
  z-index: 9;
  top: 42.5%;
}
.en #vertical-red {
	height: 100%;
  width: 15%;
  z-index: 10;
  left: 42.5%;
}
.es #española1 {
	background-color: red
}
.es #española2 {
	background-color: yellow;
  top: 33.3%;
}
.es #española3 {
	background-color: red;
  bottom: 0;
}
.fr #français1 {
	background-color: blue
}
.fr #français2, .it #italiana2 {
	background-color: white;
  left: 33.3%;
}
.fr #français3, .it #italiana3 {
	background-color: red;
  right: 0;
}
.it #italiana1 {
	background-color: green
}
.ko #hangug-guggi {
	background-color: white
}
.ko #yinyang, .ko #yin, .ko #yang, .ko #hangug1, .ko #hangug2, .ko #hangug3, .ko #hangug4 {
	position: absolute
}
.ko #yinyang {
	background: linear-gradient(to bottom, #c40e2f 0%, #c40e2f 50%, #000000 50%, #003478 50%, #003478 100%);
  border-radius: 50%;
	height: 50%;
  width: 50%;
  z-index: 3;
  top: 25%;
  left: 25%;
}
.ko #yin, .ko #yang {
  border-radius: 50%;
  height: 50%;
  width: 50%;
  z-index: 4;
  top: 25%;
}
.ko #yin {
	background: #c40e2f
}
.ko #yang {
	background: #003478;
	right: 0;
}
.ko #hangug1, .ko #hangug2, .ko #hangug3, .ko #hangug4 {
	height: 10%;
  width: 20%;
}
.ko #hangug1 {
	transform: rotate(-45deg);
	top: 21%;
  left: 9%;
}
.ko #hangug2 {
	transform: rotate(45deg);
	top: 21%;
  right: 9%;
}
.ko #hangug3 {
	transform: rotate(45deg);
  bottom: 21%;
	left: 9%;
}
.ko #hangug4 {
	transform: rotate(-45deg);
  right: 9%;
	bottom: 21%;
}
.ko .fullstripe, .ko .halfstripe {
  height: 25%;
  width: 100%;
  margin-bottom: 6.25%;
}
.ko .fullstripe {
	background: #000
}
.ko .halfstripe {
	background: linear-gradient(to right, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%)
}
.pt #bandeira-portuguesa {
	background: linear-gradient(to right, #006600 0%, #006600 35%, #FF0000 35%, #FF0000 100%);
}
.pt #bandeira-portuguesa img {
	height: 50%;
  width: 50%;
  position: absolute;
  top: 25%;
  left: 10%;
}
.zh #zhōngguó-guóqí {
	background-color: red
}
.zh #big-star, .zh .little-star {
  color: yellow;
  position: absolute;
}
.zh #big-star {
	font-size: 1vw;
  top: 10%;
  left: 15%;
}
.zh .little-star {
	font-size: .3125vw
}
.zh #star1 {
	transform: rotate(20deg);
	top: 12%;
	left: 52%;
}
.zh #star2 {
	transform: rotate(55deg);
	top: 25%;
	left: 60%;
}
.zh #star3 {
	transform: rotate(5deg);
	top: 39%;
	left: 60%;
}
.zh #star4 {
	transform: rotate(25deg);
	top: 52%;
	left: 52%;
}

<!DOCTYPE html>
<html>
    <head>
<!--jquery-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!--JS that changes the flag-->
        <script src="#lang-select.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="language-picker js-language-picker">
            <select name="lang-select" id="lang-select" label="language">
                <option value="de">Deutsch</option>
                <option selected="" value="en">English</option>
                <option value="es">Español</option>
                <option value="fr">Français</option>
                <option value="it">Italiano</option>
                <option value="ko">한국어</option>
                <option value="pt">Português</option>
                <option value="zh">中文</option>
            </select>
    	    <label for="lang-select">
                <div id="flags" class="en">
                    <div id="deutsche-flagge">
                        <div id="deutch1"></div>
                        <div id="deutch2"></div>
                        <div id="deutch3"></div>
                    </div>
                    <div id="british-flag">
                         <div id="diagonal-white-1">
                             <div id="red-tl"></div>
                             <div id="red-br"></div>
                        </div>
                        <div id="diagonal-white-2">
                             <div id="red-bl"></div>
                             <div id="red-tr"></div>
                        </div>
                        <div id=horizontal-white></div>
                        <div id=vertical-white></div>
                        <div id=horizontal-red></div>
                        <div id=vertical-red></div>
                    </div>
                    <div id="bandera-española">
                        <div id="española1"></div>
                        <div id="española2"></div>
                        <div id="española3"></div>
                    </div>
                    <div id="drapeau-français">
                        <div id="français1"></div>
                        <div id="français2"></div>
                        <div id="français3"></div>
                    </div>
                    <div id="bandiera-italiana">
                        <div id="italiana1"></div>
                        <div id="italiana2"></div>
                        <div id="italiana3"></div>
                    </div>
                    <div id="hangug-guggi">
                        <div id="yinyang">
                            <div id="yin"></div>
                            <div id="yang"></div>
                        </div>
                        <div id="hangug1">
                            <div class="fullstripe"></div>
                            <div class="fullstripe"></div>
                            <div class="fullstripe"></div>
                        </div>
                        <div id="hangug2">
                            <div class="fullstripe"></div>
                            <div class="halfstripe"></div>
                            <div class="fullstripe"></div>
                        </div>
                        <div id="hangug3">
                            <div class="halfstripe"></div>
                            <div class="fullstripe"></div>
                            <div class="halfstripe"></div>
                        </div>
                        <div id="hangug4">
                            <div class="halfstripe"></div>
                            <div class="halfstripe"></div>
                            <div class="halfstripe"></div>
                        </div>
                    </div>
                    <div id="bandeira-portuguesa">
                          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Coat_of_arms_of_Portugal_%28Lesser%29.svg/300px-Coat_of_arms_of_Portugal_%28Lesser%29.svg.png" alt="">
                    </div>
                    <div id="zhōngguó-guóqí">
                        <div id="big-star">★</div>
                        <div id="star1" class="little-star">★</div>
                        <div id="star2" class="little-star">★</div>
                        <div id="star3" class="little-star">★</div>
                        <div id="star4" class="little-star">★</div>
                    </div>
                </div>
            </label>
        </div>
    </body>
</html>